vue项目中axios的封装

引入

安装axios

npm i axios

导入并使用axios

在main.js中导入axios并把axios挂载到Vue的原型链上

import axios from 'axios'
Vue.prototype.$http = axios

安装其他插件的时候，可以直接在 main.js 中引入并使用 Vue.use()来注册，但是 axios并不是vue插件，所以不能 使用Vue.use()，所以只能在每个需要发送请求的组件中即时引入。

因为每一个以.vue的文件，都是一个Vue实例，Vue.prototype.$http = axios这相当于把axios挂载到Vue构造函数的原型链上，我们知道原型链上的方法和属性，实例是可以共享的

在为Vue原型链挂载axios后，其他组件需要使用axios发起请求时，不需要使用impor导入axios库了，而是只有下面的方法来发起请求：

methods: {
  postData () {
    this.$http({
      method: 'post',
      url: 'http://?????/user',
      data: {
        name: 'xiaoming',
        info: '12'
      }
   })
}

虽然上面的方式简化了每个组件使用axios发起请求时不用再进行导入的问题，但是每个组件在每次使用this.$http发起请求时，如果请求的根路径一样，url中的地址中，每次都写一长串并根路径一样的url地址。

为了解决这个问题，在main.js中使用以下方式解决

import axios from 'axios'
axios.defaults.baseURL='请求根路径'
Vue.prototype.$http = axios

这样在其他组件使用时只需要在url中写请求的接口地址

methods: {
  postData () {
    this.$http({
      method: 'post',
      url: '/user',
      data: {
        name: 'xiaoming',
        info: '12'
      }
   })
}

这样就不用每次重复性写一大堆请求根路径了

但是新的问题出现了，在vue项目中，如果有不同请求的根路径分布在不同的服务器上，那么上面的那种方法就不使用了

我们可以使用axios创建不同根路径的小axios，这些小axios的使用方法完全和大axios一模一样，并且他们相父独立没有关系

我们在vue项目的src/新建utils文件夹，用来存放不同的根路径请求的js文件，注意，不同的根路径，要放在不同的js文件中，下面的代码是一个模板

在src/utils/request.js

import axios from 'axios'

// 调用 axios.create() 函数，创建一个 axios 的实例对象，用 request 来接收
const request = axios.create({
  // 指定请求的根路径
  baseURL: 'https://www.escook.cn/article'
})

export default request

在src/utils/request2.js

import axios from 'axios'

// 调用 axios.create() 函数，创建一个 axios 的实例对象，用 request 来接收
const request = axios.create({
  // 指定请求的根路径
  baseURL: 'https://www.escook.cn/user'
})

export default request

接着，在vue项目的src目录下建一个api文件夹，这个文件夹用来放请求API的处理函数，每个js文件代表不同请求根路径的API接口处理函数

在src/api/articleAPI.js中

// 因为文章相关的请求根路径是一样的
//所有文章相关的 API 接口请求，都封装到这个模块中
import request from '@/utils/request.js'

// 向外按需导出一个 API 函数
export const getArticleListAPI = function(_page, _limit) {
    //要return出去一个Promise实例对象
  return request.get('/articles', {
    // 请求参数
    params: {
      _page,
      _limit
    }
  })
}

在src/api/userAPI.js中

//所有用户相关的请求根路径是一样的，在这个文件中放所有的和用户相关的API接口请求
import request from '@/utils/request2.js'

// 注意：下面的接口调用，只是纯粹的演示，因为服务器没有提供 /user 这个接口
export const getUserInfoAPI = function() {
    //return 一个Primose实例对象
  return request.get('/user')
}

其他组件需要发请求时，不用通过this.$http的形式了，而是直接按需导入api文件夹下js文件中的方法，那个方法返回的是一个Promise对象

// 需要那个请求的Promise实例对象，就按需导入 相应的API 接口
import { getArticleListAPI } from '@/api/articleAPI.js'

 
methods: {
      async initArticleList(isRefresh) {
      // 发起 GET 请求，获取文章的列表数据
      const { data: res } = await getArticleListAPI(this.page, this.limit)

 }

总结

文章借鉴链接

这是我上黑马后总结的一些axios封装的一些浅浅的理解