axios的二次封装

第一步：

安装axios
npm install axios

第二步：

创建http文件夹并在内部创建三个js文件
分别为 api.js、index.js、request.js （在这里文件名不唯一）

api.js 用来统一管理api网络接口和请求方式

export const api = {
  index: '/index',
  detail: '/detail',
  list: '/list',
  ...
}
export const METHOD = {
  GET: 'get',
  POST: 'post',
  ...
  // 请求方式有很多，这里只列举两个。
}

request.js 这个是整个封装的核心部分，用到了多环境变量

// 引入安装的  axios
import axios from 'axios'  
// 引入请求方式
import { METHOD } from './api'
// 根据多环境变量的不同，引入不同baseApi地址
import { baseApi } from '../config'
// 如果不没有设置多环境变量，则可以这样写：
// const baseApi = 'https://test.xxx.com/api'

// 创建一个新的 axios 实例并设置baseURL和请求时间
const axiosRequest = axios.create({
  baseURL: baseApi,
  timeout: 5000,
})
// 设置一个函数导出 请求方法
export function request(method, url, params) {
  switch (method) {
    case METHOD.GET:
      return GET(url, params)
    case METHOD.POST:
      return POST(url, params)
  }
}
// get 请求方法
function GET(url, params) {
  return axiosRequest.get(url, params)
}
// post 请求方法
function POST(url, params) {
  return axiosRequest.post(url, params)
}

// 请求拦截器
axiosRequest.interceptors.request.use(function (config) {
  
  return config;
}, function (error) {
  return Promise.reject(error);
});

// 响应拦截器
axiosRequest.interceptors.response.use(function (response) {
	// 可以根据响应码进行一些处理
	if(response.data.code==200){
		return response.data;
	}
  // return response;
}, function (error) {
  return Promise.reject(error);
});

index.js 用来实现接口函数的

import { request } from './request'
import { api, METHOD } from './api'

export default {
  index() {
  // 请求接口在没有传入参数时，可以不写第三个参数
    return request(METHOD.GET, api.index)
  },
  // 在有传入参数时，在参数是对象时
  detail(data) {
    return request(METHOD.GET, api.detail, data)
  },
  // 如果传入的参数是在接口后面的，如：/list?page=1&num=1
  list(page, num) {
	return request(METHOD.GET, api.list?`page=${page}&num=${num}`, )
  }
}

第三步

将index.js文件挂载到全局实例

在main.js中

import API from './http/index'
Vue.prototype.$http = API

第四步

在组件中使用

data() {
    return {
      list: [],
      page: 1,
      num: 1,
    };
  },

this.$http.index().then((res) => {
      // console.log(res);
      this.list = res.data;
});
// $route.query 用来接收上一个页面的传值
this.$http.detail({
	id: this.$route.query.id
}).then((res) => {
      // console.log(res);
      this.list = res.data;
});

this.$http.index(this.page, this.num).then((res) => {
      // console.log(res);
      this.list = res.data;
});