Axios封装

Jeank
134 阅读5分钟

对于前端工程化，除了进行引入其他包进行开发之外，我们还可能对这些引入的包或者组件进行封装，这样使用起来也是比较方便，对于工程化项目也是标配。

axios是基于ajax的一种http请求，而ajax是一种XMLHttpRequest对象，axios对其进行了进一步封装，是使用Promise进行的。

image.png

  1. 在一个vue项目中，我们在src目录下创建util文件，然后编写httpRequest.js文件；
    对于axios的封装，一般最简单的就是三个内容，首先是创建axios实例，即创建axios对象，然后对请求配置，最后进行响应配置，当然，对于大型项目而言，肯定涉及多语言环境问题，所以可能需要对路径进行配置，可能还需要对请求参数进行配置，甚至直接进行请求方式的封装，这些都是根据项目框架自行设计的。

2.下面内容是一些配置

//导入必要文件
import Vue from 'vue'
import axios from 'axios'


//进行实例化,并进行基本配置
const http=axios.create({
    // `baseURL` will be prepended to `url` unless `url` is absolute.
    // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
    // to methods of that instance.
    baseUrl:'/dev', //基础路径，是在代理路径之后拼接的，比如：http://127.0.0.1:8080 拼接之后就是http:8080//127.0.0.1:8080/dev
    timeout:5000, //单位 ms
    withCredentials:false //跨域请求是否需要凭证
})

//请求拦截配置
http.interceptors.request.use(config=>{
    //对发送请求之前做些什么
    return config
},error => {
    //对请求错误做些什么
    return Promise.reject(error)
})


//响应拦截配置
http.interceptors.response.use(response=>{
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response
},error=>{
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error)
})

//上面三个都是一些基本配置，除了这些还可以自己定义一些变量

//定义请求形式
const METHOD={
    GET:'get',
    POST:'post',
    PUT:'put',
}

//对所有请求进行封装，从而可以直接使用request
async function request(url, method, data) {
    switch (method) {
        case METHOD.GET:
            return http.get(url,{params:data}) //除了get，其他的都是第三个参数才为config
        case METHOD.POST:
            return http.post(url,data)
        case METHOD.PUT:
            return http.put(url,data)
        default:
            return http.get(url,{params:data})
    }
}

//除了最基础的三个，我们还对请求方式进行了封装，其实还可以对请求路径封装，对url进行前缀的添加，这是对于多环境问题的一种解决方案
//除此之外，还可以对请求参数进行

export default http //导出自定义的http对象，这样就算封装成功了,这是默认导出

export {request} //这是固定导出

我们可以看到最后进行默认导出和固定导出，那么对于在项目中，我们每一个模块都可能需要一个服务进行各种请求处理，那么我们就直接进行模块请求的封装；

3.在src目录下创建service目录，并命名对应模块，对模块请求进行封装：

import {request} from '@/utils/httpRequest'  //导入固定的request
import http from '@/utils/httpRequest'

export function list(params) { //这是基于请求封装的写法
    return request('/task/list','get',params)
}
export function getOrder(params) { //这是基于未进行请求方式封装的写法
    return http({
        url:'/task/getOrder',
        method:'get',
        params:params
    })
}

//进行默认导出
export default {
    list,getOrder
}

request即是对请求方式也进行封装之后的对象，上面同时给出了未对请求方式进行封装的写法。
4.写到上面，其实对于大多数来说应该是可以了，只要在想使用这个请求的组件导入即可：

//导入默认的导出，这是一种方法
import taskOrderService from '@/services/pln/taskOrder'

这个对应的是上面的{ list,getOrder }，我们可以使用taskOrderService.list调用对应的请求

如果一个模块有很多请求，然后在同一个模块下面创建了许多小模块的请求封装，我们还是使用这种导入的方式，试想一下，这种导入默认导出的方式，大家都可以自定义命名，对于一个大型项目而言，多人协同开发，大家命名可能不一样，那么这显然违反了规范开发，所以对于大型项目而言，我们还会再进行一次封装，对这些小模块的请求进行封装

5.在已经创建的services目录下创建一个index.js文件：

import taskOrderService from './pln/taskOrder' //导入默认导出

export {//进行固定导出
    taskOrderService
}

通过这种固定导出方式，那么我们在想要使用这些service的vue组件中，通过：

import {taskOrderService} from '@/services' //导入固定导出

这种导入固定导出方式，从而解决命名不规范问题。

6.大家是不是感觉这就已经可以了，其实封装上面的这些已经算是封装完成了，但是我们还需要考虑，对于项目的二次开发或者对于某些开发老手而言，大家更喜欢的是直接使用封装后的axios进行请求，比如我写完第二步我就不想再进行模块开发了，在vue组件中，我就直接导入使用已经实例化好的axios。很显然，这是可以的，但是存在一个问题，每次使用这个axios实例我都需要导入一遍，是不是太麻烦了，所以我们直接将我们创建的axios实例（已经封装好了）挂载到vue的原型上，从而不管在任何一次组件，我都可以直接通过this进行调用:

//导入默认导出
import httpRequest from '@/utils/httpRequest'

//将已经封装好的实例挂载到vue的原型上
Vue.property.$http=httpRequest

那么我们就可以直接在任何一个组件中使用：

//get方式
this.$http({
url:'',
method:'get',
params:{
    //传递的参数
}
})

//post方式
this.$http({
url:'',
method:'post',
data:{
   //传递请求的参数
}
})

以上，就是关于axios封装以及调用逻辑。

avatar
文章
阅读
粉丝