vue axios 請求封裝
阿新 • • 發佈：2018-12-17
Vue axios 的封裝心得，直接上程式碼
axois 的通用或者特殊配置，比如登陸介面的token,用不到就不用配置
axios.interceptors.request.use((config) => {
if{
可以給某個介面進行特殊配置
}
return config;
})axios 的請求封裝
export function fetch (options) { options = options || {}; return new Promise((resolve, reject) => { axios({ url: options.url, method: options.method || 'get', //baseURL: options.baseURL || Config.baseUrl, baseURL: '', headers: { 'X-Requested-With': 'XMLHttpRequest', 'Access-Control-Allow-Origin': '*', "Access-Control-Allow-Methods": "POST,GET", 'Access-Control-Allow-Credentials': true, 'Access-Control-Expose-Headers': 'FooBar', 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json', }, //`params`選項是要隨請求一起傳送的請求引數----一般連結在URL後面 //他的型別必須是一個純物件或者是URLSearchParams物件 params: options.data, // //`paramsSerializer`是一個可選的函式，起作用是讓引數（params）序列化 // //例如(https://www.npmjs.com/package/qs,http://.jquery.com/jquery.param) paramsSerializer: function (params) { }, //`data`選項是作為一個請求體而需要被髮送的資料 //該選項只適用於方法：`put/post/patch` //當沒有設定`transformRequest`選項時dada必須是以下幾種型別之一 //string/plain/object/ArrayBuffer/ArrayBufferView/URLSearchParams //僅僅瀏覽器：FormData/File/Bold //僅node:Stream data: options.data, //`timeout`選項定義了請求發出的延遲毫秒數 //如果請求花費的時間超過延遲的時間，那麼請求會被終止 // timeout: options.timeout || 30000, // //`withCredentails`選項表明了是否是跨域請求 withCredentials: true, //default //`adapter`介面卡選項允許自定義處理請求，這會使得測試變得方便 //返回一個promise,並提供驗證返回 // adapter: function(config){ // /*..........*/ // }, auth: { username: "fruitday", password: "fruitday" }, dataType: 'json', timeout: 20000, responseType: 'json', //default //`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名稱 xsrfCookieName: 'XSRF-TOKEN', //default // `xsrfHeaderName`是攜帶xsrf令牌值的http頭的名稱 xsrfHeaderName: 'X-XSRF-TOKEN', //default //`onUploadProgress`上傳進度事件 onUploadProgress: function (progressEvent) { // console.log(progressEvent) }, //下載進度的事件 onDownloadProgress: function (progressEvent) { // console.log(progressEvent) }, //相應內容的最大值 maxContentLength: 2000, //`validateStatus`定義了是否根據http相應狀態碼，來resolve或者reject promise //如果`validateStatus`返回true(或者設定為`null`或者`undefined`) ,那麼promise的狀態將會是resolved,否則其狀態就是rejected validateStatus: function (status) { return status >= 200 && status < 300; //default }, // //`maxRedirects`定義了在nodejs中重定向的最大數量 maxRedirects: 5, //default // //`httpAgent/httpsAgent`定義了當傳送http/https請求要用到的自定義代理 // //keeyAlive在選項中沒有被預設啟用 // httpAgent: new http.Agent({keeyAlive:true}), // httpsAgent: new https.Agent({keeyAlive:true}), //proxy定義了主機名字和埠號， //`auth`表明http基本認證應該與proxy代理連結，並提供證書 //這將會設定一個`Proxy-Authorization` header,並且會覆蓋掉已經存在的`Proxy-Authorization` header proxy: { host: '127.0.0.1', port: 8080, auth: { username: 'x', password: 'x' } } }).then(response => { resolve(response.data) if(response.data.Code=="1111"){ console.log('111111) } }).catch(error => { reject(error) }) }) }
我們封裝額fetch的定義介面
export function xxx(data) {
let params = {
method: 'post',
url: xxxxx',
data
}
return fetch(params);
}引入並使用
import {xxx} from "../xxxx/api.js"
xxxx({"a":000,"b":000}).then( response => { console.log(response) }).catch( error => console.log(error) );