axios在vue里的封装

4,913 阅读3分钟

前言: 随着公司移动端业务越来越少,大部分都是web端工作。因为之前也自学过一点html5,所以这次也是打算真的把web学会。当然了我首选了vue。这篇文章要说的就是我对axios在vue里的使用封装。

当然首先是安装axios及引用它。这里不是我们讲的内容。

一、首先是我们的接口文档api.js

这里我新建了service文件夹,新建api.js文件,这里我只定义了url和请求方法。api.js方法如下:

const CONTACT_API = {

    //获取首页新闻地址
    getHomeList: {
        method: 'get',
        url: '/brainofficial/news/getNewsPage'
    }
    
}

export default CONTACT_API

二、第二步就是网络请求封装http.js

http.js

import axios from 'axios'
import service from '../service/index.js'


//设置baseURL及超时时长
let instance = axios.create({
    baseURL: 'https://www.suiren.com',
    timeout: 10000
})


//定义包裹请求方法的容器
const Http = {}

//对api文档进行循环,并把每个方法都赋值到Http上去
for (let key in service) {
    //这里变量api就相当于getHomeList对象,包含了url 和method
    let api = service[key]
    //将方法赋值到Http里去(这里使用async的目的是为了,可能请求2个方法,方法2要在方法1请求完后再请求)
    Http[key] = async function (
        params,//要传递的参数
        isFormData = false,//是表单还是json上传
    ) {
        
        //请求网址
        let url = api.url
        
        //定义axios的config配置参数
        let config = {}
        let newParams = {}

        //判断content-type是否为表单形式,是否需要拼接在url上
        if (params && isFormData) {//如果有参数且为表单格式的话,把参数转换一下
            newParams = new FormData()
            for (let i in params) {
                newParams.append(i, params[i])
            }
        } else {
            newParams = params
        }

        let response = {}
        if (api.method === 'put' || api.method === 'post' || api.method === 'patch') {
            try {
                response = await instance[api.method](api.url, newParams, config)
            } catch (error) {
                response = error
            }

        } else if (api.method === 'delete' || api.method === 'get') {
            config.params = newParams
    
            try {
                response = await instance[api.method](api.url, config)
            } catch (error) {
                response = error
            }
        }

        return response//返回响应值

    }

}


// 拦截器的添加
instance.interceptors.request.use(config => {
    //发生请求前做什么(这个相当于移动端要展示loading圈一样)
    return config
}, err => {
    //请求错误(前端操作是,取消loading圈,并会弹出一个网络异常的提示)
    return Promise.reject(err)
})

//响应拦截器
instance.interceptors.response.use(res => {
    //请求成功了(前端做法是取消loading圈)|
    return res.data
}, err => {
    //请求失败(前端做法是取消loading圈给提示)
    return Promise.reject(err)
})




export default Http

三、使用

在使用之前,我们要将其挂载在我们的vue实例上。这里我使用的是vue3,在main.js如下:

import Http from './service/http'

//把Http挂载到vue的实例上
const app = createApp(App);
app.config.globalProperties.$Http = Http;
app.use(store).use(router).mount('#app')

进行网络请求如下:

    async getList() {
      var res = await this.$Http.getHomeList()
      console.log(res)
    }

还记得封装的时候我们是定义了的参数的,可以传参还有是否是表单形式,如果这里什么都没传,那么代表的都是默认值。

这里有人可能问了,如果网页需要登录,要传递token怎么办?

  • 方法1:可以通过拦截器添加

  • 方法2:直接利用vuex存储token,在封装的时候判断有值就添加

  • 方法3:当然也可以用过传递参数天界如:

      async getList() {
      var res = await this.$Http.getHomeList({value:xxx})
      console.log(res)
    }

那么在封装http.js里

        let config = {
            headers:{
                token:""
            }
        }

config.headers.token = params.value

总结:

这里是我初学对axios在vue里的使用的封装的理解。axios在vue里封装,应该是针对各自项目进行不同的封装和修改。有更好建议的同学欢迎浏览、