axios詳解以及完整封裝方法

"""

一、axios是什么

Axios 是一個(gè)基于 promise 網(wǎng)絡(luò)請(qǐng)求庫，作用于node.js 和瀏覽器中。它是 isomorphic 的(即同一套代碼可以運(yùn)行在瀏覽器和node.js中)。在服務(wù)端它使用原生 node.js http 模塊, 而在客戶端 (瀏覽端) 則使用 XMLHttpRequests。

axios有以下特性：

從瀏覽器創(chuàng)建 XMLHttpRequests
從 node.js 創(chuàng)建 http 請(qǐng)求
支持 Promise API
攔截請(qǐng)求和響應(yīng)
轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
取消請(qǐng)求
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
客戶端支持防御XSRF

axios可以請(qǐng)求的方法：

get：獲取數(shù)據(jù)，請(qǐng)求指定的信息，返回實(shí)體對(duì)象
post：向指定資源提交數(shù)據(jù)（例如表單提交或文件上傳）
put：更新數(shù)據(jù)，從客戶端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容
patch：更新數(shù)據(jù)，是對(duì)put方法的補(bǔ)充，用來對(duì)已知資源進(jìn)行局部更新
delete：請(qǐng)求服務(wù)器刪除指定的數(shù)據(jù)
head：獲取報(bào)文首部

請(qǐng)求方法別名

為了方便起見，axios為所有支持的請(qǐng)求方法提供了別名:

axios(config)
axios.request(config)
axios.get(url [,config])
axios.post(url [,data [,config]])
axios.put(url [,data [,config]])
axios.delete(url [,config])
axios.patch(url [,data [,config]])
axios.head(url [,config])

二.axios實(shí)例及配置方法

1.創(chuàng)建axios實(shí)例
axios.create([config])

可以同時(shí)創(chuàng)建多個(gè)axios實(shí)例。

示例代碼
"""

const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});

"""
實(shí)例方法

以下是可用的實(shí)例方法。指定的配置將與實(shí)例的配置合并。

axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
axios#getUri([config])

2.配置方法

配置對(duì)象常用的配置項(xiàng)：

這些是創(chuàng)建請(qǐng)求時(shí)可以用的配置選項(xiàng)。只有 url 是必需的。如果沒有指定 method，請(qǐng)求將默認(rèn)使用 GET 方法。更多配置項(xiàng)請(qǐng)查看官方文檔

"""

{
  // 路徑url
  url: '/user',

  // 請(qǐng)求方法，默認(rèn)get
  method: 'get', 

  //基礎(chǔ)url，最終請(qǐng)求的url是 baseURL+url拼接，所以再全局設(shè)置默認(rèn)，可以使得發(fā)送請(qǐng)求時(shí)的url變得簡(jiǎn)潔
  baseURL: 'https://some-domain.com/api/',

  //設(shè)置請(qǐng)求頭
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //設(shè)置請(qǐng)求url的query參數(shù)，可以使得url簡(jiǎn)潔。
  //比如url是https://some-domain.com/api/user  然后params如下設(shè)置，那么最終的url是：
  //https://some-domain.com/api/user?ID=12345&name=Jack
  params: {
	ID: 12345,
	name:"Jack"
  },

 //設(shè)置請(qǐng)求體
  data: {
	firstName: 'Fred'
  },

  //設(shè)置請(qǐng)求的另外一種格式，不過這個(gè)是直接設(shè)置字符串的
  data: 'Country=Brasil&City=Belo Horizonte',

 //請(qǐng)求超時(shí)，單位毫秒，默認(rèn)0，不超時(shí)。
  timeout: 1000,

  //響應(yīng)數(shù)據(jù)類型，默認(rèn)json
  responseType: 'json', 

  //響應(yīng)數(shù)據(jù)的編碼規(guī)則，默認(rèn)utf-8
  responseEncoding: 'utf8',

	//響應(yīng)體的最大長(zhǎng)度 
  maxContentLength: 2000,

  // 請(qǐng)求體的最大長(zhǎng)度
  maxBodyLength: 2000,

  //設(shè)置響應(yīng)狀態(tài)碼為多少時(shí)是成功，調(diào)用resolve，否則調(diào)用reject失敗
  //默認(rèn)是大于等于200，小于300
  validateStatus: function (status) {
	return status >= 200 && status < 300; 
  },

"""

默認(rèn)配置

可以設(shè)置全局默認(rèn)配置，是為了避免多種重復(fù)配置在不同請(qǐng)求中重復(fù)，比如baseURL、timeout等，這里設(shè)置baseURL。

全局 axios 默認(rèn)值
"""

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

"""
自定義實(shí)例默認(rèn)值

"""

// 創(chuàng)建實(shí)例時(shí)配置默認(rèn)值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 創(chuàng)建實(shí)例后修改默認(rèn)值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

""""

配置的優(yōu)先級(jí)

配置將會(huì)按優(yōu)先級(jí)進(jìn)行合并。它的順序是：在 lib/defaults.js 中找到的庫默認(rèn)值，然后是實(shí)例的 defaults 屬性，最后是請(qǐng)求的 config 參數(shù)。后面的優(yōu)先級(jí)要高于前面的。

三、攔截器

在請(qǐng)求或響應(yīng)被 then 或 catch 處理前攔截它們，自定義的axios實(shí)例也可添加攔截器，如：
"""

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

"""
請(qǐng)求攔截器

示例代碼：

"""

// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
	// 在發(fā)送請(qǐng)求之前做些什么
	return config;
  }, function (error) {
	// 對(duì)請(qǐng)求錯(cuò)誤做些什么
	return Promise.reject(error);
  });

"""
響應(yīng)攔截器

示例代碼：

"""

// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
	// 2xx 范圍內(nèi)的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
	// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
	return response;
  }, function (error) {
	// 超出 2xx 范圍的狀態(tài)碼都會(huì)觸發(fā)該函數(shù)。
	// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
	return Promise.reject(error);
  });

"""
取消攔截器

示例代碼：

"""

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

"""

四、取消請(qǐng)求

注意：從 v0.22.0 開始，Axios 支持以 fetch API 方式—— AbortController 取消請(qǐng)求，CancelToken API被棄用

這里我們兩種方法都介紹一下，使用過程中能用 AbortController 就盡量別用 CancelToken

AbortController

"""

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消請(qǐng)求
controller.abort()

"""
CancelToken

"""

let source = axios.CancelToken.source();

axios.get('/users/12345',{
				cancelToken: source.token
			}).then(res=>{
				console.log(res)
			}).catch(err=>{
				//取消請(qǐng)求后會(huì)執(zhí)行該方法
				console.log(err)
			})

//取消請(qǐng)求，參數(shù)可選，該參數(shù)信息會(huì)發(fā)送到請(qǐng)求的catch中
source.cancel('取消后的信息');

"""
也可以通過傳遞一個(gè) executor 函數(shù)到 CancelToken 的構(gòu)造函數(shù)來創(chuàng)建一個(gè) cancel token：

"""

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
	// executor 函數(shù)接收一個(gè) cancel 函數(shù)作為參數(shù)
	cancel = c;
  })
});

// 取消請(qǐng)求
cancel();

"""
注意: 可以使用同一個(gè) cancel token 或 signal 取消多個(gè)請(qǐng)求

五、axios封裝

先設(shè)計(jì)我們想要這個(gè)通用請(qǐng)求能達(dá)到什么樣的效果：

優(yōu)化配置，設(shè)置默認(rèn)配置項(xiàng)（responseType、跨域攜帶cookie、token、超時(shí)設(shè)置）
統(tǒng)一設(shè)置請(qǐng)求頭
根據(jù)環(huán)境設(shè)置 baseURL
通過 Axios 方法直接發(fā)起請(qǐng)求
添加請(qǐng)求攔截器
添加響應(yīng)攔截器
導(dǎo)出 Promise 對(duì)象
封裝 Post 方法，精簡(jiǎn) post 請(qǐng)求方式
封裝 Get 方法，精簡(jiǎn) get 請(qǐng)求方式
請(qǐng)求成功，配置業(yè)務(wù)狀態(tài)碼
全局的loading配置

一、axios的封裝
在vue項(xiàng)目中，和后臺(tái)交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運(yùn)行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性，例如攔截請(qǐng)求和響應(yīng)、取消請(qǐng)求、轉(zhuǎn)換json、客戶端防御XSRF等。所以我們的尤大大也是果斷放棄了對(duì)其官方庫vue-resource的維護(hù)，直接推薦我們使用axios庫。如果還對(duì)axios不了解的，可以移步axios文檔。

安裝
npm install axios; // 安裝axios
引入
一般我會(huì)在項(xiàng)目的src目錄中，新建一個(gè)request文件夾，然后在里面新建一個(gè)http.js和一個(gè)api.js文件。http.js文件用來封裝我們的axios，api.js用來統(tǒng)一管理我們的接口。

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊，用來序列化post類型的數(shù)據(jù)，后面會(huì)提到
// vant的toast提示框組件，大家可根據(jù)自己的ui組件更改。
import { Toast } from 'vant'; 
環(huán)境的切換
我們的項(xiàng)目環(huán)境可能有開發(fā)環(huán)境、測(cè)試環(huán)境和生產(chǎn)環(huán)境。我們通過node的環(huán)境變量來匹配我們的默認(rèn)的接口url前綴。axios.defaults.baseURL可以設(shè)置axios的默認(rèn)請(qǐng)求地址就不多說了。

// 環(huán)境的切換
if (process.env.NODE_ENV == 'development') {    
	axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
	axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
	axios.defaults.baseURL = 'https://www.production.com';
}
設(shè)置請(qǐng)求超時(shí)
通過axios.defaults.timeout設(shè)置默認(rèn)的請(qǐng)求超時(shí)時(shí)間。例如超過了10s，就會(huì)告知用戶當(dāng)前請(qǐng)求超時(shí)，請(qǐng)刷新等。

axios.defaults.timeout = 10000;
post請(qǐng)求頭的設(shè)置
post請(qǐng)求的時(shí)候，我們需要加上一個(gè)請(qǐng)求頭，所以可以在這里進(jìn)行一個(gè)默認(rèn)的設(shè)置，即設(shè)置post的請(qǐng)求頭為application/x-www-form-urlencoded;charset=UTF-8

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
請(qǐng)求攔截
我們?cè)诎l(fā)送請(qǐng)求前可以進(jìn)行一個(gè)請(qǐng)求的攔截，為什么要攔截呢，我們攔截請(qǐng)求是用來做什么的呢？比如，有些請(qǐng)求是需要用戶登錄之后才能訪問的，或者post請(qǐng)求的時(shí)候，我們需要序列化我們提交的數(shù)據(jù)。這時(shí)候，我們可以在請(qǐng)求被發(fā)送之前進(jìn)行一個(gè)攔截，從而進(jìn)行我們想要的操作。

請(qǐng)求攔截
// 先導(dǎo)入vuex,因?yàn)槲覀円褂玫嚼锩娴臓顟B(tài)對(duì)象
// vuex的路徑根據(jù)自己的路徑去寫
import store from '@/store/index';

// 請(qǐng)求攔截器axios.interceptors.request.use(    
	config => {        
		// 每次發(fā)送請(qǐng)求之前判斷vuex中是否存在token        
		// 如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，這樣后臺(tái)根據(jù)token判斷你的登錄情況
		// 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷 
		const token = store.state.token;        
		token && (config.headers.Authorization = token);        
		return config;    
	},    
	error => {        
		return Promise.error(error);    
})
這里說一下token，一般是在登錄完成之后，將用戶的token通過localStorage或者cookie存在本地，然后用戶每次在進(jìn)入頁面的時(shí)候（即在main.js中），會(huì)首先從本地存儲(chǔ)中讀取token，如果token存在說明用戶已經(jīng)登陸過，則更新vuex中的token狀態(tài)。然后，在每次請(qǐng)求接口的時(shí)候，都會(huì)在請(qǐng)求的header中攜帶token，后臺(tái)人員就可以根據(jù)你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。這時(shí)候或許有些小伙伴會(huì)有疑問了，就是每個(gè)請(qǐng)求都攜帶token，那么要是一個(gè)頁面不需要用戶登錄就可以訪問的怎么辦呢？其實(shí)，你前端的請(qǐng)求可以攜帶token，但是后臺(tái)可以選擇不接收啊！

響應(yīng)的攔截
// 響應(yīng)攔截器
axios.interceptors.response.use(    
	response => {   
		// 如果返回的狀態(tài)碼為200，說明接口請(qǐng)求成功，可以正常拿到數(shù)據(jù)     
		// 否則的話拋出錯(cuò)誤
		if (response.status === 200) {            
			return Promise.resolve(response);        
		} else {            
			return Promise.reject(response);        
		}    
	},    
	// 服務(wù)器狀態(tài)碼不是2開頭的的情況
	// 這里可以跟你們的后臺(tái)開發(fā)人員協(xié)商好統(tǒng)一的錯(cuò)誤狀態(tài)碼    
	// 然后根據(jù)返回的狀態(tài)碼進(jìn)行一些操作，例如登錄過期提示，錯(cuò)誤提示等等
	// 下面列舉幾個(gè)常見的操作，其他需求可自行擴(kuò)展
	error => {            
		if (error.response.status) {            
			switch (error.response.status) {                
				// 401: 未登錄
				// 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑
				// 在登錄成功后返回當(dāng)前頁面，這一步需要在登錄頁操作。                
				case 401:                    
					router.replace({                        
						path: '/login',                        
						query: { 
							redirect: router.currentRoute.fullPath 
						}
					});
					break;

            // 403 token過期
            // 登錄過期對(duì)用戶進(jìn)行提示
            // 清除本地token和清空vuex中token對(duì)象
            // 跳轉(zhuǎn)登錄頁面                
            case 403:
                 Toast({
                    message: '登錄過期，請(qǐng)重新登錄',
                    duration: 1000,
                    forbidClick: true
                });
                // 清除token
                localStorage.removeItem('token');
                store.commit('loginSuccess', null);
                // 跳轉(zhuǎn)登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁面 
                setTimeout(() => {                        
                    router.replace({                            
                        path: '/login',                            
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }                        
                    });                    
                }, 1000);                    
                break; 

            // 404請(qǐng)求不存在
            case 404:
                Toast({
                    message: '網(wǎng)絡(luò)請(qǐng)求不存在',
                    duration: 1500,
                    forbidClick: true
                });
                break;
            // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示
            default:
                Toast({
                    message: error.response.data.message,
                    duration: 1500,
                    forbidClick: true
                });
        }
        return Promise.reject(error.response);
    }
}    
});
響應(yīng)攔截器很好理解，就是服務(wù)器返回給我們的數(shù)據(jù)，我們?cè)谀玫街翱梢詫?duì)他進(jìn)行一些處理。例如上面的思想：如果后臺(tái)返回的狀態(tài)碼是200，則正常返回?cái)?shù)據(jù)，否則的根據(jù)錯(cuò)誤的狀態(tài)碼類型進(jìn)行一些我們需要的錯(cuò)誤，其實(shí)這里主要就是進(jìn)行了錯(cuò)誤的統(tǒng)一處理和沒登錄或登錄過期后調(diào)整登錄頁的一個(gè)操作。

要注意的是，上面的Toast()方法，是我引入的vant庫中的toast輕提示組件，你根據(jù)你的ui庫，對(duì)應(yīng)使用你的一個(gè)提示組件。

封裝get方法和post方法
我們常用的ajax請(qǐng)求方法有g(shù)et、post、put等方法，相信小伙伴都不會(huì)陌生。axios對(duì)應(yīng)的也有很多類似的方法，不清楚的可以看下文檔。但是為了簡(jiǎn)化我們的代碼，我們還是要對(duì)其進(jìn)行一個(gè)簡(jiǎn)單的封裝。下面我們主要封裝兩個(gè)方法：get和post。

get方法：我們通過定義一個(gè)get函數(shù)，get函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)表示我們要請(qǐng)求的url地址，第二個(gè)參數(shù)是我們要攜帶的請(qǐng)求參數(shù)。get函數(shù)返回一個(gè)promise對(duì)象，當(dāng)axios其請(qǐng)求成功時(shí)resolve服務(wù)器返回 值，請(qǐng)求失敗時(shí)reject錯(cuò)誤值。最后通過export拋出get函數(shù)。

/**
 * get方法，對(duì)應(yīng)get請(qǐng)求
 * @param {String} url [請(qǐng)求的url地址]
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
 */
export function get(url, params){    
	return new Promise((resolve, reject) =>{        
		axios.get(url, {            
			params: params        
		}).then(res => {
			resolve(res.data);
		}).catch(err =>{
			reject(err.data)        
	})    
});}
post方法：原理同get基本一樣，但是要注意的是，post方法必須要使用對(duì)提交從參數(shù)對(duì)象進(jìn)行序列化的操作，所以這里我們通過node的qs模塊來序列化我們的參數(shù)。這個(gè)很重要，如果沒有序列化操作，后臺(tái)是拿不到你提交的數(shù)據(jù)的。這就是文章開頭我們import QS from 'qs';的原因。如果不明白序列化是什么意思的，就百度一下吧，答案一大堆。

/** 
 * post方法，對(duì)應(yīng)post請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
export function post(url, params) {
	return new Promise((resolve, reject) => {
		 axios.post(url, QS.stringify(params))
		.then(res => {
			resolve(res.data);
		})
		.catch(err =>{
			reject(err.data)
		})
	});
}
這里有個(gè)小細(xì)節(jié)說下，axios.get()方法和axios.post()在提交數(shù)據(jù)時(shí)參數(shù)的書寫方式還是有區(qū)別的。區(qū)別就是，get的第二個(gè)參數(shù)是一個(gè){}，然后這個(gè)對(duì)象的params屬性值是一個(gè)參數(shù)對(duì)象的。而post的第二個(gè)參數(shù)就是一個(gè)參數(shù)對(duì)象。兩者略微的區(qū)別要留意哦！

axios的封裝基本就完成了，下面再簡(jiǎn)單說下api的統(tǒng)一管理。
整齊的api就像電路板一樣，即使再復(fù)雜也能很清晰整個(gè)線路。上面說了，我們會(huì)新建一個(gè)api.js,然后在這個(gè)文件中存放我們所有的api接口。

首先我們?cè)赼pi.js中引入我們封裝的get和post方法

/**   
 * api接口統(tǒng)一管理
 */
import { get, post } from './http'
現(xiàn)在，例如我們有這樣一個(gè)接口，是一個(gè)post請(qǐng)求：

http://www.baiodu.com/api/v1/users/my_address/address_edit_before
我們可以在api.js中這樣封裝：

export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);
我們定義了一個(gè)apiAddress方法，這個(gè)方法有一個(gè)參數(shù)p，p是我們請(qǐng)求接口時(shí)攜帶的參數(shù)對(duì)象。而后調(diào)用了我們封裝的post方法，post方法的第一個(gè)參數(shù)是我們的接口地址，第二個(gè)參數(shù)是apiAddress的p參數(shù)，即請(qǐng)求接口時(shí)攜帶的參數(shù)對(duì)象。最后通過export導(dǎo)出apiAddress。

然后在我們的頁面中可以這樣調(diào)用我們的api接口：

import { apiAddress } from '@/request/api';// 導(dǎo)入我們的api接口
export default {        
	name: 'Address',    
	created () {
		this.onLoad();
	},
	methods: {            
		// 獲取數(shù)據(jù)            
		onLoad() {
			// 調(diào)用api接口，并且提供了兩個(gè)參數(shù)                
			apiAddress({                    
				type: 0,                    
				sort: 1                
			}).then(res => {
				// 獲取數(shù)據(jù)成功后的其他操作
				………………                
			})            
		}        
	}
}
其他的api接口，就在pai.js中繼續(xù)往下面擴(kuò)展就可以了。友情提示，為每個(gè)接口寫好注釋哦！！！

api接口管理的一個(gè)好處就是，我們把a(bǔ)pi統(tǒng)一集中起來，如果后期需要修改接口，我們就直接在api.js中找到對(duì)應(yīng)的修改就好了，而不用去每一個(gè)頁面查找我們的接口然后再修改會(huì)很麻煩。關(guān)鍵是，萬一修改的量比較大，就規(guī)格gg了。還有就是如果直接在我們的業(yè)務(wù)代碼修改接口，一不小心還容易動(dòng)到我們的業(yè)務(wù)代碼造成不必要的麻煩。

好了，最后把完成的axios封裝代碼奉上。

/**axios封裝
 * 請(qǐng)求攔截、相應(yīng)攔截、錯(cuò)誤統(tǒng)一處理
 */
import axios from 'axios';import QS from 'qs';
import { Toast } from 'vant';
import store from '../store/index'

// 環(huán)境的切換
if (process.env.NODE_ENV == 'development') {    
	axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {    
	axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {    
	axios.defaults.baseURL = 'http://api.123dailu.com/';
}

// 請(qǐng)求超時(shí)時(shí)間
axios.defaults.timeout = 10000;

// post請(qǐng)求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 請(qǐng)求攔截器
axios.interceptors.request.use(    
	config => {
		// 每次發(fā)送請(qǐng)求之前判斷是否存在token，如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，不用每次請(qǐng)求都手動(dòng)添加了
		// 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷
		const token = store.state.token;        
		token && (config.headers.Authorization = token);        
		return config;    
	},    
	error => {        
		return Promise.error(error);    
	})

// 響應(yīng)攔截器
axios.interceptors.response.use(    
	response => {        
		if (response.status === 200) {            
			return Promise.resolve(response);        
		} else {            
			return Promise.reject(response);        
		}    
	},
	// 服務(wù)器狀態(tài)碼不是200的情況    
	error => {        
		if (error.response.status) {            
			switch (error.response.status) {                
				// 401: 未登錄                
				// 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑                
				// 在登錄成功后返回當(dāng)前頁面，這一步需要在登錄頁操作。                
				case 401:                    
					router.replace({                        
						path: '/login',                        
						query: { redirect: router.currentRoute.fullPath } 
					});
					break;
				// 403 token過期                
				// 登錄過期對(duì)用戶進(jìn)行提示                
				// 清除本地token和清空vuex中token對(duì)象                
				// 跳轉(zhuǎn)登錄頁面                
				case 403:                     
					Toast({                        
						message: '登錄過期，請(qǐng)重新登錄',                        
						duration: 1000,                        
						forbidClick: true                    
					});                    
					// 清除token                    
					localStorage.removeItem('token');                    
					store.commit('loginSuccess', null);                    
					// 跳轉(zhuǎn)登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁面
					setTimeout(() => {                        
						router.replace({                            
							path: '/login',                            
							query: { 
								redirect: router.currentRoute.fullPath 
							}                        
						});                    
					}, 1000);                    
					break; 
				// 404請(qǐng)求不存在                
				case 404:                    
					Toast({                        
						message: '網(wǎng)絡(luò)請(qǐng)求不存在',                        
						duration: 1500,                        
						forbidClick: true                    
					});                    
				break;                
				// 其他錯(cuò)誤，直接拋出錯(cuò)誤提示                
				default:                    
					Toast({                        
						message: error.response.data.message,                        
						duration: 1500,                        
						forbidClick: true                    
					});            
			}            
			return Promise.reject(error.response);        
		}       
	}
);
/** 
 * get方法，對(duì)應(yīng)get請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
export function get(url, params){    
	return new Promise((resolve, reject) =>{        
		axios.get(url, {            
			params: params        
		})        
		.then(res => {            
			resolve(res.data);        
		})        
		.catch(err => {            
			reject(err.data)        
		})    
	});
}
/** 
 * post方法，對(duì)應(yīng)post請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
export function post(url, params) {    
	return new Promise((resolve, reject) => {         
		axios.post(url, QS.stringify(params))        
		.then(res => {            
			resolve(res.data);        
		})        
		.catch(err => {            
			reject(err.data)        
		})    
	});
}
axios的封裝根據(jù)需求的不同而不同。
1.優(yōu)化axios封裝，去掉之前的get和post

2.斷網(wǎng)情況處理

3.更加模塊化的api管理

4.接口域名有多個(gè)的情況

5.api掛載到vue.prototype上省去引入的步驟

http.js中axios封裝的優(yōu)化，先直接貼代碼：

/**
 * axios封裝
 * 請(qǐng)求攔截、響應(yīng)攔截、錯(cuò)誤統(tǒng)一處理
 */
import axios from 'axios';
import router from '../router';
import store from '../store/index';
import { Toast } from 'vant';

/** 
 * 提示函數(shù) 
 * 禁止點(diǎn)擊蒙層、顯示一秒后關(guān)閉
 */
const tip = msg => {    
	Toast({        
		message: msg,        
		duration: 1000,        
		forbidClick: true    
	});
}

/** 
 * 跳轉(zhuǎn)登錄頁
 * 攜帶當(dāng)前頁面路由，以期在登錄頁面完成登錄后返回當(dāng)前頁面
 */
const toLogin = () => {
	router.replace({
		path: '/login',        
		query: {
			redirect: router.currentRoute.fullPath
		}
	});
}

/** 
 * 請(qǐng)求失敗后的錯(cuò)誤統(tǒng)一處理 
 * @param {Number} status 請(qǐng)求失敗的狀態(tài)碼
 */
const errorHandle = (status, other) => {
	// 狀態(tài)碼判斷
	switch (status) {
		// 401: 未登錄狀態(tài)，跳轉(zhuǎn)登錄頁
		case 401:
			toLogin();
			break;
		// 403 token過期
		// 清除token并跳轉(zhuǎn)登錄頁
		case 403:
			tip('登錄過期，請(qǐng)重新登錄');
			localStorage.removeItem('token');
			store.commit('loginSuccess', null);
			setTimeout(() => {
				toLogin();
			}, 1000);
			break;
		// 404請(qǐng)求不存在
		case 404:
			tip('請(qǐng)求的資源不存在'); 
			break;
		default:
			console.log(other);   
		}}

// 創(chuàng)建axios實(shí)例
var instance = axios.create({    timeout: 1000 * 12});
// 設(shè)置post請(qǐng)求頭
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/** 
 * 請(qǐng)求攔截器 
 * 每次請(qǐng)求前，如果存在token則在請(qǐng)求頭中攜帶token 
 */ 
instance.interceptors.request.use(    
	config => {        
		// 登錄流程控制中，根據(jù)本地是否存在token判斷用戶的登錄情況        
		// 但是即使token存在，也有可能token是過期的，所以在每次的請(qǐng)求頭中攜帶token        
		// 后臺(tái)根據(jù)攜帶的token判斷用戶的登錄情況，并返回給我們對(duì)應(yīng)的狀態(tài)碼        
		// 而后我們可以在響應(yīng)攔截器中，根據(jù)狀態(tài)碼進(jìn)行一些統(tǒng)一的操作。        
		const token = store.state.token;        
		token && (config.headers.Authorization = token);        
		return config;    
	},    
	error => Promise.error(error))

// 響應(yīng)攔截器
instance.interceptors.response.use(    
	// 請(qǐng)求成功
	res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
	// 請(qǐng)求失敗
	error => {
		const { response } = error;
		if (response) {
			// 請(qǐng)求已發(fā)出，但是不在2xx的范圍 
			errorHandle(response.status, response.data.message);
			return Promise.reject(response);
		} else {
			// 處理斷網(wǎng)的情況
			// eg:請(qǐng)求超時(shí)或斷網(wǎng)時(shí)，更新state的network狀態(tài)
			// network狀態(tài)在app.vue中控制著一個(gè)全局的斷網(wǎng)提示組件的顯示隱藏
			// 關(guān)于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù)，會(huì)在斷網(wǎng)組件中說明
			if (!window.navigator.onLine) {
			   store.commit('changeNetwork', false);
			} else {
				return Promise.reject(error);
			}
		}
	});

export default instance;
這個(gè)axios和之前的大同小異，做了如下幾點(diǎn)改變：

1.去掉了之前get和post方法的封裝，通過創(chuàng)建一個(gè)axios實(shí)例然后export default方法導(dǎo)出，這樣使用起來更靈活一些。

2.去掉了通過環(huán)境變量控制baseUrl的值。考慮到接口會(huì)有多個(gè)不同域名的情況，所以準(zhǔn)備通過js變量來控制接口域名。這點(diǎn)具體在api里會(huì)介紹。

3.增加了請(qǐng)求超時(shí)，即斷網(wǎng)狀態(tài)的處理。說下思路，當(dāng)斷網(wǎng)時(shí)，通過更新vuex中network的狀態(tài)來控制斷網(wǎng)提示組件的顯示隱藏。斷網(wǎng)提示一般會(huì)有重新加載數(shù)據(jù)的操作，這步會(huì)在后面對(duì)應(yīng)的地方介紹。

4.公用函數(shù)進(jìn)行抽出，簡(jiǎn)化代碼，盡量保證單一職責(zé)原則。

下面說下api這塊，考慮到一下需求：

1.更加模塊化

2.更方便多人開發(fā)，有效減少解決命名沖突

3.處理接口域名有多個(gè)情況

這里這里呢新建了一個(gè)api文件夾，里面有一個(gè)index.js和一個(gè)base.js，以及多個(gè)根據(jù)模塊劃分的接口js文件。index.js是一個(gè)api的出口，base.js管理接口域名，其他js則用來管理各個(gè)模塊的接口。

先放index.js代碼：

/** 
 * api接口的統(tǒng)一出口
 */
// 文章模塊接口
import article from '@/api/article';
// 其他模塊的接口……

// 導(dǎo)出接口
export default {    
	article,
	// ……
}
index.js是一個(gè)api接口的出口，這樣就可以把a(bǔ)pi接口根據(jù)功能劃分為多個(gè)模塊，利于多人協(xié)作開發(fā)，比如一個(gè)人只負(fù)責(zé)一個(gè)模塊的開發(fā)等，還能方便每個(gè)模塊中接口的命名哦。

base.js:

/**
 * 接口域名的管理
 */
const base = {    
	sq: 'https://xxxx111111.com/api/v1',    
	bd: 'http://xxxxx22222.com/api'
}

export default base;
通過base.js來管理我們的接口域名，不管有多少個(gè)都可以通過這里進(jìn)行接口的定義。即使修改起來，也是很方便的。

最后就是接口模塊的說明，例如上面的article.js:

/**
 * article模塊接口列表
 */

import base from './base'; // 導(dǎo)入接口域名列表
import axios from '@/utils/http'; // 導(dǎo)入http中創(chuàng)建的axios實(shí)例
import qs from 'qs'; // 根據(jù)需求是否導(dǎo)入qs模塊

const article = {    
	// 新聞列表    
	articleList () {        
		return axios.get(`${base.sq}/topics`);    
	},    
	// 新聞詳情,演示    
	articleDetail (id, params) {        
		return axios.get(`${base.sq}/topic/${id}`, {            
			params: params        
		});    
	},
	// post提交    
	login (params) {        
		return axios.post(`${base.sq}/accesstoken`, qs.stringify(params));    
	}
	// 其他接口…………
}

export default article;
1.通過直接引入我們封裝好的axios實(shí)例，然后定義接口、調(diào)用axios實(shí)例并返回，可以更靈活的使用axios，比如你可以對(duì)post請(qǐng)求時(shí)提交的數(shù)據(jù)進(jìn)行一個(gè)qs序列化的處理等。

2.請(qǐng)求的配置更靈活，你可以針對(duì)某個(gè)需求進(jìn)行一個(gè)不同的配置。關(guān)于配置的優(yōu)先級(jí)，axios文檔說的很清楚，這個(gè)順序是：在 lib/defaults.js 找到的庫的默認(rèn)值，然后是實(shí)例的 defaults 屬性，最后是請(qǐng)求的 config 參數(shù)。后者將優(yōu)先于前者。

3.restful風(fēng)格的接口，也可以通過這種方式靈活的設(shè)置api接口地址。

最后，為了方便api的調(diào)用，我們需要將其掛載到vue的原型上。在main.js中：

import Vue from 'vue'
import App from './App'
import router from './router' // 導(dǎo)入路由文件
import store from './store' // 導(dǎo)入vuex文件
import api from './api' // 導(dǎo)入api接口

Vue.prototype.$api = api; // 將api掛載到vue的原型上
然后我們可以在頁面中這樣調(diào)用接口，eg：

methods: {    
	onLoad(id) {      
		this.$api.article.articleDetail(id, {        
			api: 123      
		}).then(res=> {
			// 執(zhí)行某些操作      
		})    
	}  
}
再提一下斷網(wǎng)的處理，這里只做一個(gè)簡(jiǎn)單的示例：

<template>  
	<div id="app">    
		<div v-if="!network">      
			<h3>我沒網(wǎng)了</h3>      
			<div @click="onRefresh">刷新</div>      
		</div>    
		<router-view/>      
	</div>
</template>

<script>
	import { mapState } from 'vuex';
	export default {  
		name: 'App',  
		computed: {    
			...mapState(['network'])  
		},  
		methods: {    
			// 通過跳轉(zhuǎn)一個(gè)空頁面再返回的方式來實(shí)現(xiàn)刷新當(dāng)前頁面數(shù)據(jù)的目的
			onRefresh () {      
				this.$router.replace('/refresh')    
			}  
		}
	}
</script>
這是app.vue，這里簡(jiǎn)單演示一下斷網(wǎng)。在http.js中介紹了，我們會(huì)在斷網(wǎng)的時(shí)候，來更新vue中network的狀態(tài)，那么這里我們根據(jù)network的狀態(tài)來判斷是否需要加載這個(gè)斷網(wǎng)組件。斷網(wǎng)情況下，加載斷網(wǎng)組件，不加載對(duì)應(yīng)頁面的組件。當(dāng)點(diǎn)擊刷新的時(shí)候，我們通過跳轉(zhuǎn)refesh頁面然后立即返回的方式來實(shí)現(xiàn)重新獲取數(shù)據(jù)的操作。因此我們需要新建一個(gè)refresh.vue頁面，并在其beforeRouteEnter鉤子中再返回當(dāng)前頁面。


// refresh.vue
beforeRouteEnter (to, from, next) {
	next(vm => {            
		vm.$router.replace(from.fullPath)        
	})    
}

"""

posted @ 2023-07-15 16:15 二價(jià)亞鐵閱讀(4541) 評(píng)論(8) 收藏舉報(bào)

刷新頁面返回頂部

二價(jià)亞鐵.

axios詳解以及完整封裝方法

一、axios是什么

二.axios實(shí)例及配置方法

三、攔截器

四、取消請(qǐng)求

五、axios封裝

公告