vue框架的封装 axios

V、VUE的安装 vue-cli+码云gitee的项目创建

A、axios的封装

A-1错误码文件的封装

在src文件夹下创建service文件夹，文件夹内新建文件errorCode.js

'use strict'

/** 网络请求连接错误的错误码回馈 */
export const checkStatus = response => {
  const status = Number(response.status) || -1000 // 自定义错误码
  if ((status >= 200 && status < 300) || status === 304) {
    return response.data
  } else {
    let msg = ''
    switch (status) {
      case -1:
        msg = '远程服务器相应失败，请稍后再试'
        break
      case 400:
        msg = '400:错误请求'
        break
      case 401:
        msg = '401:访问令牌无效或已过期'
        break
      case 403:
        msg = '403:拒绝访问'
        break
      case 404:
        msg = '404:资源不存在'
        break
      case 405:
        msg = '405: 请求方法为允许'
        break
      case 408:
        msg = '408：请求超时'
        break
      case 500:
        msg = '500：访问服务失败'
        break
      case 501:
        msg = '501：未实现'
        break
      case 502:
        msg = '502：无效网关'
        break
      case 503:
        msg = '503：服务不可用'
        break
      default:
        msg = '连接错误'
    }
    return {
      status,
      msg
    }
  }
}

axios依赖的引入

npm install axios --save axios

在src/service文件夹下新建文件request.js

创建axios实例 ——request.js下

'use strict'
// /** axios的封装 */
import axios from 'axios' // axios模块
import { checkStatus } from './errorCode' // 处理函数  （下面拦截器和请求器的使用）

// axios 配置
const instance = axios.create({
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 30000,
  baseURL: '' // 接口请求地址
})

请求器和拦截器的创建 ——request.js下

// 添加请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么，比如传token
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use(response => {
  return Promise.resolve(checkStatus(response))
}, e => { // 相应错误处理
  if (e.response) {
    return Promise.reject(checkStatus(e.response))
  } else if (e.code === 'ECONNABORTED' && e.message.indexOf('timeout') !== -1) {
    return Promise.reject(new Error({msg: '请求超时', status: -1001}))
  } else {
    return Promise.reject(new Error({msg: '无响应', status: -1000}))
  }
})

post/get方法的封装——request.js下

/**
 * post 请求方法
 * @param url 请求域名
 * @param data 请求方法
 * @returns {Promise}
 */
export const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    instance.post(url, data).then(response => {
      // 对接口错误码做处理
      resolve(response)
    }, err => {
      reject(err)
    })
  })
}

/**
 * get 请求方法
 * @param url 请求域名
 * @param data 请求数据
 * @returns {Promise}
 */
export const get = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    instance.get(url, {
      params: data
    })
      .then(response => {
        resolve(response)
      })
      .catch(err => {
        reject(err)
      })
  })
}

/**
 * 封装所有请求
 * @param method 请求方法
 * @param url 请求域名
 * @param data 请求数据
 * @param headers 请求的协议类型
 * @returns {Promise}
 */
export const request = (method, url, data = {}, headers) => {
  return new Promise((resolve, reject) => {
    instance({
      method: method || 'post',
      url: url,
      params: method === 'get' ? data : '',
      data: method !== 'get' ? data : '',
      headers: headers || {'Content-Type': 'application/json'}
    })
      .then(response => {
        // 对接口错误码做处理

        resolve(response)
      })
      .catch(err => {
        reject(err)
      })
  })
}

接口调用

1、src/service下新建文件夹api文件夹用于接口统一管理
2、api文件夹下新建user.js用于管理用户相关的接口

'use strict'
import {request} from '../request'

/** 用户登录接口 */
export function userLogin (data = {}) {
  return request('get', 'http://127.0.0.1:7001', data)
}

export function userLoginPost (data = {}) {
  return request('post', 'http://127.0.0.1:7001/index/post', data)
}

3、在所需的页面中进行调用

<script>

import { userLogin, userLoginPost } from '../service/api/user'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  async created () {
    const rs = await userLogin().then(res => {
      return res
    }).catch(e => {
      return e
    })
    console.log(rs)

    const rsPost = await userLoginPost().then(res => {
      return res
    }).catch(e => {
      return e
    })
    console.log(rsPost)
  }
}
</script>