[圖片上傳中...(微信截圖_20191016141649.png-599d36-1571206683665-0)]
上一篇文章里面大致記錄了一下axios的進(jìn)階用法
這一篇文章主要記錄axios：如何封裝、如何使用封裝的方法

封裝之前的準(zhǔn)備工作

1.先建一個(gè)service文件夾，主要放置接口api和axios請(qǐng)求方法的封裝神汹。目錄如下：

1.png

2.contactApi.js文件中放置接口：請(qǐng)求方式和請(qǐng)求相對(duì)路徑

const CONTACT_API = {
    //獲取聯(lián)系人列表
    getContactList: {
        method: 'get',
        url: '/contactList'
    },
    //新建聯(lián)系人 form-data
    newContactForm: {
        method: 'post', 
        url: '/contact/new/form'
    },
    //新建聯(lián)系人 application/json
    newContactJson: {
        method: 'post',
        url: '/contact/new/json'
    },
    //編輯聯(lián)系人
    editContact: {
        method: 'put',
        url: '/contact/edit'
    },
    //刪除聯(lián)系人
    delContact: {
        method: 'delete',
        url: '/contact'
    }
}

export default CONTACT_API

3.http.js中是axios請(qǐng)求的封裝方法

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

//service循環(huán)遍歷輸出不同的請(qǐng)求方法
let instance = axios.create({
    baseURL: 'http://localhost:9000/api',
    timeout: 1000
})

const Http ={}; //包裹請(qǐng)求方法的容器

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

    //async 作用：避免進(jìn)入回調(diào)地獄
    Http[key] = async function (
            params, //請(qǐng)求參數(shù)get(url),put/post/patch(data),delete(url)
            isFormData=false, //標(biāo)識(shí)是否是form-data請(qǐng)求
            isFormJson=false, //標(biāo)識(shí)是否是application/x-www-form-urlencoded請(qǐng)求
            config={}, //配置參數(shù)
        ){
        
            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
            }

            //不同請(qǐng)求的判斷
            let response = {}; //請(qǐng)求返回值
            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 ;//返回響應(yīng)值
    }
}


//攔截器的添加

//請(qǐng)求攔截器
instance.interceptors.request.use(config=>{
    //發(fā)起請(qǐng)求前做些什么
    Toast.loading({
        mask: true, //是否有陰影
        duration: 0,//0表示一直存在
        forbidClick: true, //禁止點(diǎn)擊
        message: '加載中...'
    })
    return config
}, ()=>{
    //請(qǐng)求錯(cuò)誤
    Toast.clear()
    Toast('請(qǐng)求錯(cuò)誤被冒，請(qǐng)稍后重試')
})

//響應(yīng)攔截器
instance.interceptors.response.use(res=>{
    //請(qǐng)求成功
    Toast.clear()
    return res.data
}, ()=>{
    Toast.clear()
    Toast('請(qǐng)求錯(cuò)誤，請(qǐng)稍后重試')
})

export default Http

4.在main.js文件引入http.js,并把它掛載到vue實(shí)例上蠕搜，讓其全局可用怎茫。

import Http from './service/http'

Vue.prototype.$Http = Http  //把Http掛載到了Vue實(shí)例上，即全局可用

5.axios的請(qǐng)求調(diào)用

//獲取聯(lián)系人列表
        async getList () {
            let res = await this.$Http.getContactList()
            this.list = res.data
        },
// 保存聯(lián)系人
        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()
                    }
            }
        },
// 刪除聯(lián)系人
        async onDelete (info) {
            let res = await this.$Http.delContact({
                id: info.id
            })
            if(res.code===200){
                Toast('刪除成功')
                this.showEdit = false
                this.getList()
            }
        },