axios---高阶用法（封装）

[图片上传中...(微信截图_20191016141649.png-599d36-1571206683665-0)]
上一篇文章里面大致记录了一下axios的进阶用法
这一篇文章主要记录axios：如何封装、如何使用封装的方法

封装之前的准备工作

1.先建一个service文件夹，主要放置接口api和axios请求方法的封装。目录如下：

1.png

2.contactApi.js文件中放置接口：请求方式和请求相对路径

const CONTACT_API = {
    //获取联系人列表
    getContactList: {
        method: 'get',
        url: '/contactList'
    },
    //新建联系人 form-data
    newContactForm: {
        method: 'post', 
        url: '/contact/new/form'
    },
    //新建联系人 application/json
    newContactJson: {
        method: 'post',
        url: '/contact/new/json'
    },
    //编辑联系人
    editContact: {
        method: 'put',
        url: '/contact/edit'
    },
    //删除联系人
    delContact: {
        method: 'delete',
        url: '/contact'
    }
}

export default CONTACT_API

3.http.js中是axios请求的封装方法

import axios from 'axios'
import service from './contactApi'
import {Toast} from 'vant'
import qs from 'qs' 

//service循环遍历输出不同的请求方法
let instance = axios.create({
    baseURL: 'http://localhost:9000/api',
    timeout: 1000
})

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

for(let key in service) {
    let api = service[key]; //url, method

    //async 作用：避免进入回调地狱
    Http[key] = async function (
            params, //请求参数get(url),put/post/patch(data),delete(url)
            isFormData=false, //标识是否是form-data请求
            isFormJson=false, //标识是否是application/x-www-form-urlencoded请求
            config={}, //配置参数
        ){
        
            let newParams = {}

            //content-type 是否是form-data 的判断
            if(params && isFormData) {
                newParams = new FormData()
                for(let i in params){
                    newParams.append(i, params[i])
                }
            } else if(params && isFormJson) {//content-type 是否是application/x-www-form-urlencoded 的判断
                newParams = qs.stringify(params)
            } 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(err){
                        response = err
                }
            } else if (api.method==='delete' || api.method==='get'){
                config.params = newParams
                try{
                    response = await instance[api.method](api.url, config)
                }catch(err){
                        response = err
                }
            }
            return response ;//返回响应值
    }
}


//拦截器的添加

//请求拦截器
instance.interceptors.request.use(config=>{
    //发起请求前做些什么
    Toast.loading({
        mask: true, //是否有阴影
        duration: 0,//0表示一直存在
        forbidClick: true, //禁止点击
        message: '加载中...'
    })
    return config
}, ()=>{
    //请求错误
    Toast.clear()
    Toast('请求错误，请稍后重试')
})

//响应拦截器
instance.interceptors.response.use(res=>{
    //请求成功
    Toast.clear()
    return res.data
}, ()=>{
    Toast.clear()
    Toast('请求错误，请稍后重试')
})

export default Http

4.在main.js文件引入http.js,并把它挂载到vue实例上，让其全局可用。

import Http from './service/http'

Vue.prototype.$Http = Http  //把Http挂载到了Vue实例上，即全局可用

5.axios的请求调用

//获取联系人列表
        async getList () {
            let res = await this.$Http.getContactList()
            this.list = res.data
        },
// 保存联系人
        async onSave (info) {
            if(this.isEdit) {
                //编辑保存
                let res = await this.$Http.editContact(info)
                if(res.code===200) {
                    Toast('编辑成功')
                    this.showEdit = false
                    this.getList()
                }
            } else {
                //新建保存
                let res = await this.$Http.newContactJson(info)
                if(res.code===200) {
                        this.showEdit = false
                        this.getList()
                    }
            }
        },
// 删除联系人
        async onDelete (info) {
            let res = await this.$Http.delContact({
                id: info.id
            })
            if(res.code===200){
                Toast('删除成功')
                this.showEdit = false
                this.getList()
            }
        },