axios在vue里的封装

前言： 随着公司移动端业务愈来愈少，大部分都是web端工做。由于以前也自学过一点html5，因此此次也是打算真的把web学会。固然了我首选了vue。这篇文章要说的就是我对axios在vue里的使用封装。

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

1、首先是咱们的接口文档api.js

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

const CONTACT_API = {

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

export default CONTACT_API
复制代码

2、第二步就是网络请求封装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

复制代码

3、使用

在使用以前，咱们要将其挂载在咱们的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里封装，应该是针对各自项目进行不一样的封装和修改。有更好建议的同窗欢迎浏览、