最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間:8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
vue中Axios的封裝與API接口的管理詳解

vue中Axios的封裝與API接口的管理詳解

成都創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站建設(shè)、做網(wǎng)站與策劃設(shè)計(jì),華池網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:華池等地區(qū)。華池做網(wǎng)站價(jià)格咨詢:13518219792

如圖,面對(duì)一團(tuán)糟代碼的你~~~真的想說(shuō),What F~U~C~K?。。?/p>

回歸正題,我們所要的說(shuō)的axios的封裝和api接口的統(tǒng)一管理,其實(shí)主要目的就是在幫助我們簡(jiǎn)化代碼和利于后期的更新維護(hù)。

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

安裝

npm install axios; // 安裝axios

引入

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

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊,用來(lái)序列化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)境。我們通過(guò)node的環(huán)境變量來(lái)匹配我們的默認(rèn)的接口url前綴。axios.defaults.baseURL可以設(shè)置axios的默認(rèn)請(qǐng)求地址就不多說(shuō)了。

// 環(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í)

通過(guò)axios.defaults.timeout設(shè)置默認(rèn)的請(qǐng)求超時(shí)時(shí)間。例如超過(guò)了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)求是用來(lái)做什么的呢?比如,有些請(qǐng)求是需要用戶登錄之后才能訪問(wèn)的,或者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是過(guò)期的,所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷 
 const token = store.state.token; 
 token && (config.headers.Authorization = token); 
 return config; 
 }, 
 error => { 
 return Promise.error(error); 
})

這里說(shuō)一下token,一般是在登錄完成之后,將用戶的token通過(guò)localStorage或者cookie存在本地,然后用戶每次在進(jìn)入頁(yè)面的時(shí)候(即在main.js中),會(huì)首先從本地存儲(chǔ)中讀取token,如果token存在說(shuō)明用戶已經(jīng)登陸過(guò),則更新vuex中的token狀態(tài)。然后,在每次請(qǐng)求接口的時(shí)候,都會(huì)在請(qǐng)求的header中攜帶token,后臺(tái)人員就可以根據(jù)你攜帶的token來(lái)判斷你的登錄是否過(guò)期,如果沒(méi)有攜帶,則說(shuō)明沒(méi)有登錄過(guò)。這時(shí)候或許有些小伙伴會(huì)有疑問(wèn)了,就是每個(gè)請(qǐng)求都攜帶token,那么要是一個(gè)頁(yè)面不需要用戶登錄就可以訪問(wèn)的怎么辦呢?其實(shí),你前端的請(qǐng)求可以攜帶token,但是后臺(tái)可以選擇不接收啊!

響應(yīng)的攔截

// 響應(yīng)攔截器
axios.interceptors.response.use( 
 response => { 
 // 如果返回的狀態(tài)碼為200,說(shuō)明接口請(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)行一些操作,例如登錄過(guò)期提示,錯(cuò)誤提示等等
 // 下面列舉幾個(gè)常見的操作,其他需求可自行擴(kuò)展
 error => {  
 if (error.response.status) {  
  switch (error.response.status) {  
  // 401: 未登錄
  // 未登錄則跳轉(zhuǎn)登錄頁(yè)面,并攜帶當(dāng)前頁(yè)面的路徑
  // 在登錄成功后返回當(dāng)前頁(yè)面,這一步需要在登錄頁(yè)操作。  
  case 401:   
   router.replace({   
   path: '/login',   
   query: { 
    redirect: router.currentRoute.fullPath 
   }
   });
   break;

  // 403 token過(guò)期
  // 登錄過(guò)期對(duì)用戶進(jìn)行提示
  // 清除本地token和清空vuex中token對(duì)象
  // 跳轉(zhuǎn)登錄頁(yè)面  
  case 403:
   Toast({
   message: '登錄過(guò)期,請(qǐng)重新登錄',
   duration: 1000,
   forbidClick: true
   });
   // 清除token
   localStorage.removeItem('token');
   store.commit('loginSuccess', null);
   // 跳轉(zhuǎn)登錄頁(yè)面,并將要瀏覽的頁(yè)面fullPath傳過(guò)去,登錄成功后跳轉(zhuǎn)需要訪問(wèn)的頁(yè)面 
   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)一處理和沒(méi)登錄或登錄過(guò)期后調(diào)整登錄頁(yè)的一個(gè)操作。

要注意的是,上面的Toast()方法,是我引入的vant庫(kù)中的toast輕提示組件,你根據(jù)你的ui庫(kù),對(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方法:我們通過(guò)定義一個(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ò)誤值。最后通過(guò)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)行序列化的操作,所以這里我們通過(guò)node的qs模塊來(lái)序列化我們的參數(shù)。這個(gè)很重要,如果沒(méi)有序列化操作,后臺(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é)說(shuō)下,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ū)別要留意哦!

vue中Axios的封裝與API接口的管理詳解

axios的封裝基本就完成了,下面再簡(jiǎn)單說(shuō)下api的統(tǒng)一管理。

整齊的api就像電路板一樣,即使再?gòu)?fù)雜也能很清晰整個(gè)線路。上面說(shuō)了,我們會(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ì)象。最后通過(guò)export導(dǎo)出apiAddress。

然后在我們的頁(yè)面中可以這樣調(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)一集中起來(lái),如果后期需要修改接口,我們就直接在api.js中找到對(duì)應(yīng)的修改就好了,而不用去每一個(gè)頁(yè)面查找我們的接口然后再修改會(huì)很麻煩。關(guān)鍵是,萬(wà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是過(guò)期的,所以在響應(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)登錄頁(yè)面,并攜帶當(dāng)前頁(yè)面的路徑    
    // 在登錄成功后返回當(dāng)前頁(yè)面,這一步需要在登錄頁(yè)操作。    
    case 401:     
     router.replace({      
      path: '/login',      
      query: { redirect: router.currentRoute.fullPath } 
     });
     break;
    // 403 token過(guò)期    
    // 登錄過(guò)期對(duì)用戶進(jìn)行提示    
    // 清除本地token和清空vuex中token對(duì)象    
    // 跳轉(zhuǎn)登錄頁(yè)面    
    case 403:      
     Toast({      
      message: '登錄過(guò)期,請(qǐng)重新登錄',      
      duration: 1000,      
      forbidClick: true     
     });     
     // 清除token     
     localStorage.removeItem('token');     
     store.commit('loginSuccess', null);     
     // 跳轉(zhuǎn)登錄頁(yè)面,并將要瀏覽的頁(yè)面fullPath傳過(guò)去,登錄成功后跳轉(zhuǎn)需要訪問(wèn)的頁(yè)面
     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)  
  }) 
 });
}

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。


網(wǎng)頁(yè)名稱:vue中Axios的封裝與API接口的管理詳解
網(wǎng)頁(yè)地址:http://fisionsoft.com.cn/article/jgosog.html