（11）VUE axios配置

1. 下载axios和qs

npm install axios -S
npm install qs -S

2. api文件夹下创建install.js文件

import apiList from './apiList'

var install = function (Vue) {
    // if (install.installed) return
    install.installed = true
    Object.defineProperties(Vue.prototype, {
        $api: {
            get() {
                return apiList
            }
        }
    })
}

export default {
    install
}

3. 在main.js文件中引入axios、qs和api，以及配置请求头

import QS from 'qs';
import Axios from 'axios';
import api from './api/install';

Vue.prototype.$qs = QS;
Vue.use(api);
Vue.prototype.$axios = Axios;
Vue.config.productionTip = false;

Axios.defaults.headers = {
  'Content-Type': 'application/x-www-form-urlencoded'
}

4. api文件夹下index.js （固定文件，内容不用修改）

import axios from './axios'

let instance = axios()

export default {
  get(url, params, headers) {
    let options = {}

    if (params) {
      options.params = params
    }
    if (headers) {
      options.headers = headers
    }
    return instance.get(url, options)
  },
  post(url, params, headers, data) {
    let options = {}
    if (params) {
      options.params = params
    }
    if (headers) {
      options.headers = headers
    }
    return instance.post(url, data, options)
  },
  put(url, params, headers) {
    let options = {}

    if (headers) {
      options.headers = headers
    }
    return instance.put(url, params, options)
  },
  delete(url, params, headers) {
    let options = {}

    if (params) {
      options.params = params
    }
    if (headers) {
      options.headers = headers
    }
    return instance.delete(url, options)
  }
}

5. api文件夹下创建baseUrl.js

let baseUrl = '/api'
export default baseUrl

6. api文件夹下创建axios.js

import axios from 'axios'
import QS from 'qs'

// 创建 axios 实例
let service = axios.create({
  // headers: {'Content-Type': 'application/json'},
  timeout: 60000
})

// 设置 post、put 默认 Content-Type
service.defaults.headers.post['Content-Type'] = 'application/json'
service.defaults.headers.put['Content-Type'] = 'application/json'

// 添加请求拦截器
service.interceptors.request.use(
  (config) => {
    if (config.method === 'post' || config.method === 'put') {
      // post、put 提交时，将对象转换为string, 为处理Java后台解析问题
      config.data = QS.stringify(config.data)
    }
    // 请求发送前进行处理
    return config
  },
  (error) => {
    // 请求错误处理
    return Promise.reject(error)
  }
)

// 添加响应拦截器
service.interceptors.response.use(
  (response) => {
    let { data } = response
    return data
  },
  (error) => {
    // eslint-disable-next-line no-unused-vars
    let info = {},
      { status, statusText, data } = error.response

    if (!error.response) {
      info = {
        code: 5000,
        msg: 'Network Error'
      }
    } else {
      // 此处整理错误信息格式
      info = {
        code: status,
        data: data,
        msg: statusText
      }
    }
  }
)

/**
 * 创建统一封装过的 axios 实例
 * @return {AxiosInstance}
 */
export default function() {
  return service
}

7. api文件夹下创建apiList.js

// 导入接口文件的路径
import publicApi from './admin/public'

export default {
    publicApi,
}

8. 创建接口模块文件夹admin/public

image.png

9. admin/public文件夹中创建index.js 和urls.js

// index.js

// 引入api下的index文件
import api from '../../index'
import urls from './urls'

const header = {'Content-Type': "application/x-www-form-urlencoded"}

export default {
    imgCode(params) {
        return api.get(urls.imgCode, params, header)
    },
}

// urls.js

import baseUrl from '../../baseUrl'
export default {
    // baseUrl + '接口地址'
    imgCode: baseUrl + '/?/Foreign/imgCode',
}

10. axios在页面的使用

// 1. get无参请求
this.$api.publicApi.imgCode({}).then(res => {
       console.log(res);
});

// 2. get有参请求
  this.$api.note
      .notelist({
           access_token: localStorage.getItem("access_token"),
           random: 1
       })
       .then(res => {
           console.log(res);
       });

// 3. post请求
let data = {
      access_token: localStorage.getItem("access_token"),
      content: this.content,
      tag: JSON.stringify(this.tag)
};
this.$api.note.notecreate({}, data).then(res => {
      console.log(res);
});