首先是安装，进入项目运行命令，cnpm install axios –save

安装完成后在项目src文件夹下新建network文件夹（自己起名）

然后在里面新建一个request.js（自己起名），打开它，开始写我们的代码

首先我们先引入axios并创建一个它的实例

import axios from 'axios'

//创建axios实例并配置基础数据，如baseURL，timeout，headers等等
const instance = axios.create({
  baseURL: 'http://xxx.xxx.com/api/app/xxxxxx/',
  timeout: 5000
})

接着，我们来配置一下拦截器，分别是请求拦截和响应拦截

//请求拦截
instance.interceptors.request.use(config => {
  // Do something
  return config
}, err => {
  // Do something
  return err
})

//响应拦截
instance.interceptors.response.use(res => {
  // Do something
  return res.data
}, err => {
  // Do something
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        err.message = '400,请求错误'
        break
      case 401:
        err.message = '401,未授权'
        break
      case 404:
        err.message = '404,未找到'
        break
    }
  }
  return err
})

配置完拦截器后，我们开始写请求方法

const request = {

  /** get 请求
   * @param  {接口地址} url
   * @param  {请求参数} params
   */
  get(url, params) {
    return new Promise((resolve, reject) => {
      instance({
        method: 'get',
        url,
        params,
      }).then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      })
    })
  },
  /** post 请求
   * @param  {接口地址} url
   * @param  {请求参数} data
   */
  post(url, data) {
    return new Promise((resolve, reject) => {
      instance({
        method: 'post',
        url,
        data,
      }).then((res) => {
        resolve(res)
      }).catch((err) => {
        reject(err)
      })
    })
  }
}

最后，也是最重要的，我们导出这个request对象并在main.js里全局注册它

//这是写在request.js的
export default reques

//这是写在main.js的
import request from './network/request'

//把封装好的axios添加到vue的原型，以便全局使用
Vue.prototype.$request = request

之后我们就可以在其他地方愉快的使用它了。举个栗子

methods: {
  async login() {
    try {
      let res = await this.$request.get('test/login', {id:12345})
      console.log(res);
    } catch (err) {
      console.log(err);
    }
  }
}
               

作者