vue axios 請求封裝與管理 promise介紹

背景

前端開發中，網絡請求的管理一直是一大重點，本文是作者對vue中網絡請求的封裝管理的總結。

請求模塊

傳統的ajax是基於XMLHttpRequest(XHR),但是配置混亂，編碼麻煩，而jQuery確實好用但是框架太大，ue曾經推出vue-resource但是現在已經不再維護。axios是vue作者推薦的框架，也自然而然成爲我們的首選。

axios請求方式

axios(config)
axios.request(config)
axios.get(url[,config])
…

基本使用

安裝axios框架：

npm install axios --save  //--save代表上線需要使用的模塊

在需要使用的組件中

import axios from 'axios

script中

axios(config)

也就是

axios({
	url:'httpbin.org' //網路請求測試網站
}).then(res=>{
	console.log...
})

axios直接返回一個promise,可用then進行處理

promise

promise 是 ES6 中非常重要和好用的一個特性，是異步編程的一種解決方案。常用於網絡請求。

普通的js代碼是自上而下的同步結果。 但是網絡請求中如果同步的話會導致堵塞，js界面需要等待請求結束才能進行別的操作。

傳統的異步解決方案

傳統的異步解決方案：傳入另外一個函數，當數據請求完成時將數據通過這個函數回調出去。

但是可能造成回調地域，即需要通過不斷的嵌套完成多層的回調。形式上會造成代碼混亂，而promise則是一種優雅的方式。

promise異步解決方案

//1.使用settimeout
setTimeout(()=>{
	console.log("haha")
})

//promisede 的參數爲函數 函數（resolve,reject）
// resolve和reject本身也是函數
new Promise((resolve,reject)=>{
	setTimeout(()=>{
	console.log("haha")
	console.log("haha")
	console.log("haha")
	console.log("haha")
		setTimeout(()=>{
		console.log("haha2")
		console.log("haha2")
		console.log("haha2")
		},1000)
}，1000)
})

假如我們的異步中包括異步，就會產生回調地域。

new Promise((resolve,reject)=>{
	setTimeout(()=>{
	resolve()
	}).then()

這樣當js運行到resolve時就會跳到.then後面的代碼塊

具體使用

1. new -> 構造函數，保存狀態信息和執行傳入的函數
2. 執行傳入的函數（回調函數，會傳入兩個參數： resolve,reject，參數本身也是函數）

new Promise((resolve,reject)=>{
fun((data)=>{處理代碼}
}，1000）

就能變成

new Promise((resolve,reject)=>{
fun((data)=>{
	reslove(data)	//處理代碼
}
}，1000）.then((data)=>{})

代碼從嵌套成爲鏈式的，便於閱讀理解

reslove 與 reject

new Promise((resolve,reject)=>{
fun((data)=>{
	reslove(data)	//處理代碼，成功時
	reject('err')  //失敗時，轉到catch
}
}，1000）.then((data)=>{data處理}
).catch(err=>{err處理})

網絡封裝（最終方案）

import axios  from 'axios'

export function request(config){
    //1.創建axios的實例
    const instance = axios.create({
        baseURL: 'http://localhost:8089',
        timeout: 5000
    })

    //發送真正的網絡請求
    instance(config)
}

axios的基礎配置比較簡單，但是問題時如何優雅的調用傳出的的函數，一種方式時在request中加一個參數形式的函數，然後在內部執行這個函數，但是對傳參有了要求，不夠優雅，所以解決方案是使用promise.
在 request.js中

import axios  from 'axios'


export function request(config){
        //1.創建axios的實例
        const instance = axios.create({
            baseURL: 'http://localhost:8088',
            timeout: 5000
        })
        // 2.axios的攔截器
        // 2.1.請求攔截的作用
        instance.interceptors.request.use(config => {
            return config
        }, err => {
            // console.log(err);
        })

        // 2.2.響應攔截
        instance.interceptors.response.use(res => {
            return res.data
        }, err => {
            console.log(err);
        })
        window.console.log("requset2.js")
        return instance(config) //instance是一個promise
}

在api文件中

import {request} from "./request";


export function loginRequest(data){
    return request({
        url:'/...',
        method: 'post',
        headers: { 'Content-Type': 'application/json' },
        data,
    })
}

在.vue文件中

import///
 loginRequest(param).then(res=>{})