Vue中axios的封裝

npm install axios; //命令列安裝axios

首先，新建乙個js檔案用於引入axios。比如說，新建乙個http.js檔案，在檔案中引入步驟如下所示：

import qs from 'qs';//引入qs模組，為post型資料提供序列化（非常重要）

import  from 'vant';
# 設定請求超時
axios.defaults.timeout = 10000: //設定超時時間為10s```
# 設定post請求方式請求頭

**如下：

config => ,    

error => )

axios.interceptors.response.use(    

response =>  else     
},    
error => 
});break;             
case 403: //token過期
toast();
localstorage.removeitem('token');
store.commit('loginsuccess', null);
settimeout(() =>                         
});                    
}, 1000);                    
break; 
case 404:   //請求錯誤
toast();
break;
default:  // 其它錯誤，直接丟擲錯誤提示
toast();
}return promise.reject(error.response);
}}    
});

首先是get方法的封裝，封裝方式如下：

export function get(url, params)).then(res => ).catch(err =>)    

});

export function post(url, params) )

.catch(err =>)
});}

那麼，當我們封裝好axios以後要如何去使用呢？接下來我們就一起去了解一下api介面的實現》

實現建立乙個js介面檔案，統一管理介面。

然後在該檔案中引入get()和post()

export const login = p => post('', p)在這裡我們定義了乙個login方法，這個方法有乙個引數p，它是請求該介面時攜帶的引數物件。另乙個url就是我們請求介面的位址。

這樣，我們就寫好了乙個api介面了，接下來就是在頁面方法中引用。

import  from '@/request/api';
export default ).then(res = > )
}	}}

vue中axios的封裝

cnpm install axios s 第二步建立乙個htttp.js response 從哪個頁面跳轉 return response error 封裝get方法 param url param data returns export function fetch url,params then...

vue中axios的封裝

先安裝 axios npm install axiosaxios的詳細介紹以及用法 就不多說了請 移步 github 下面是簡單的封裝乙個 http.js，在此說明 checkstatus 這個方法呢 是不一定需要的 根據個人的專案需求吧，也可以直接返回response，交給後面另行處理也行。或者根...

vue中axios的封裝使用

npm install axios s 或者 npm i axios simport axios from axios vue.prototype.axios axios 將axios繫結到vue的原型上module.exports before import axios from axios im...