前言
成都創(chuàng)新互聯(lián)公司是專業(yè)的淇濱網(wǎng)站建設(shè)公司,淇濱接單;提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行淇濱網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
以前寫Vue項(xiàng)目的時(shí)候都是使用vue-resource做為項(xiàng)目ajax庫,在11月份的某一天尤大微博的更新表示ajax的庫應(yīng)該是通用的,放棄了對(duì)vue-resource的技術(shù)支持,推薦使用axios。
推薦使用Vue-cli工具來創(chuàng)建和管理項(xiàng)目,就算剛開始不熟悉,用著用著便可知曉其中的奧妙。前一段時(shí)間官方所推薦的數(shù)據(jù)請(qǐng)求插件還是Vue-resource,但現(xiàn)在已經(jīng)變了,變成了Axios,不用知道為什么變了,反正這個(gè)用起來比那個(gè)好一些,用就是了,下面是一些封裝axios請(qǐng)求的一些經(jīng)驗(yàn),不對(duì)之處,還望多多指教!
方法如下
一、創(chuàng)建文件,Vue項(xiàng)目初始化之后,在src目錄下再創(chuàng)建一個(gè)util工具文件夾,一般就是用來存放一些封裝的函數(shù)方法,現(xiàn)在讓我們?cè)趗til文件目錄下創(chuàng)建一個(gè)http.js文件,封裝axios方法。
二、直接上代碼(常規(guī)版),代碼中有詳細(xì)的注釋
import axios from 'axios' //引用axios import {Promise} from 'es6-promise' //引入Promise // axios 配置 axios.defaults.timeout = 5000; //設(shè)置超時(shí)時(shí)間 axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //這是調(diào)用數(shù)據(jù)接口 // http request 攔截器(所有發(fā)送的請(qǐng)求都要從這兒過一次),通過這個(gè),我們就可以把token傳到后臺(tái),我這里是使用sessionStorage來存儲(chǔ)token等權(quán)限信息和用戶信息,若要使用cookie可以自己封裝一個(gè)函數(shù)并import便可使用 axios.interceptors.request.use( config => { const token = sessionStorage.getItem("token"); //獲取存儲(chǔ)在本地的token config.data = JSON.stringify(config.data); config.headers = { 'Content-Type':'application/json' //設(shè)置跨域頭部,雖然很多瀏覽器默認(rèn)都是使用json傳數(shù)據(jù),但咱要考慮IE瀏覽器。 }; if (token) { config.headers.Authorization = "Token " + token; //攜帶權(quán)限參數(shù) } return config; }, err => { return Promise.reject(err); } ); // http response 攔截器(所有接收到的請(qǐng)求都要從這兒過一次) axios.interceptors.response.use( response => { //response.status===401是我和后臺(tái)約定的權(quán)限丟失或者權(quán)限不夠返回的狀態(tài)碼,這個(gè)可以自己和后臺(tái)約定,約定返回某個(gè)自定義字段也是可以的 if(response.status == 401) { router.push({ //push后面是一個(gè)參數(shù)對(duì)象,可以攜帶很多參數(shù),具體可以去vue-router上查看,例如query字段表示攜帶的參數(shù) path: '/login' }) } return response; }, error => { return Promise.reject(error.response.data) }); export default axios; /** * fetch 請(qǐng)求方法 * @param url * @param params * @returns {Promise} */ export function fetch(url, params = {}) { return new Promise((resolve, reject) => { axios.get(url, { params: params }) .then(response => { resolve(response.data); }) .catch(err => { reject(err) }) }) } /** * post 請(qǐng)求方法 * @param url * @param data * @returns {Promise} */ export function post(url, data = {}) { return new Promise((resolve, reject) => { axios.post(url, data) .then(response => { resolve(response.data); }, err => { reject(err); }) }) } /** * patch 方法封裝 * @param url * @param data * @returns {Promise} */ export function patch(url, data = {}) { return new Promise((resolve, reject) => { axios.patch(url, data) .then(response => { resolve(response.data); }, err => { reject(err); }) }) } /** * put 方法封裝 * @param url * @param data * @returns {Promise} */ export function put(url, data = {}) { return new Promise((resolve, reject) => { axios.put(url, data) .then(response => { resolve(response.data); }, err => { reject(err); }) }) }
三、(動(dòng)態(tài)版),axios的攔截器不是必要的,不是每個(gè)項(xiàng)目都需要,而且headers里面的Content-Type和Authorization不止一種,這時(shí)就需要使用另一種方法。
util/http.js
import axios from 'axios' //引用axios import {Promise} from 'es6-promise' //引入Promise // axios 配置和攔截器都不用了,這里我使用了一個(gè)動(dòng)態(tài)配置數(shù)據(jù)請(qǐng)求地址,在App.vue中,代碼在下面,這個(gè)也不是必須的。 //^_^下面都設(shè)置一個(gè)默認(rèn)的頭部,使用的時(shí)候可以傳入數(shù)據(jù)覆蓋^_^,例如使用fetch(GET)方法時(shí),沒有請(qǐng)求數(shù)據(jù),但是請(qǐng)求頭有變化,則應(yīng)寫成 fetch("地址", {}, {"這里寫頭部的內(nèi)容"}) 記住沒數(shù)據(jù)用一個(gè)空對(duì)象占位置 /** * fetch 請(qǐng)求方法 * @param url * @param params * @returns {Promise} */ export function fetch(url, params = {}, headers = { 'Content-Type': 'application/json', //設(shè)置跨域頭部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") }) { return new Promise((resolve, reject) => { axios.get(url, { params: params, headers: headers }) .then(response => { resolve(response.data); }) .catch(err => { reject(err.response) }) }) } /** * post 請(qǐng)求方法 * @param url * @param data * @returns {Promise} */ export function post(url, data = {}, config = { "headers": { 'Content-Type': 'application/json', //設(shè)置跨域頭部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") } }) { return new Promise((resolve, reject) => { axios.post(url, data, config) .then(response => { resolve(response.data); }, err => { reject(err.response); }) }) } /** * patch 方法封裝 * @param url * @param data * @returns {Promise} */ export function patch(url, data = {}, config = { "headers": { 'Content-Type': 'application/json', //設(shè)置跨域頭部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") } }) { return new Promise((resolve, reject) => { axios.patch(url, data, config) .then(response => { resolve(response.data); }, err => { reject(err.response); }) }) } /** * put 方法封裝 * @param url * @param data * @returns {Promise} */ export function put(url, data = {}, config = { "headers": { 'Content-Type': 'application/json', //設(shè)置跨域頭部 "Authorization": 'JWT ' + sessionStorage.getItem("authToken") } }) { return new Promise((resolve, reject) => { axios.put(url, data, config) .then(response => { resolve(response.data); }, err => { reject(err.response); }) }) }
App.vue(這是在src目錄下的程序入口文件)
總結(jié)
常見問題
在使用動(dòng)態(tài)版時(shí),為什么稱為動(dòng)態(tài)呢,是因?yàn)樵L問地址和請(qǐng)求地址是同一個(gè)地址可端口號(hào),例如我通過http://www.cmgos.com(默認(rèn)端口80)訪問項(xiàng)目,那么我的baseURL會(huì)自動(dòng)的變?yōu)閔ttp:www.cmgos.com:80/api/,這么做的原因是當(dāng)某一天項(xiàng)目遷移或者h(yuǎn)ttp改為https時(shí),不用你再去更改請(qǐng)求地址,程序自動(dòng)就完成了
數(shù)據(jù)請(qǐng)求地址配置不正確?如果你配置了baseURL,那么你封裝的函數(shù)在使用時(shí)僅需傳入基于baseURL的請(qǐng)求地址,例如傳入login/那么請(qǐng)求地址會(huì)自動(dòng)變?yōu)閔ttp:www.cmgos.com:80/api/login/,若未配置,那么可以直接傳入整個(gè)請(qǐng)求地址
注意事項(xiàng)
在使用動(dòng)態(tài)版時(shí),由于沒有使用攔截器,所以下面封裝的函數(shù)在返回錯(cuò)誤的時(shí)候需要寫成err.response.data
來獲取返回的數(shù)據(jù),但我寫的是err.response
,因?yàn)檫@樣可以拿到(status)狀態(tài)碼等信息,若不需要判斷返回的狀態(tài)碼,則改為err.response.data
便可
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。