使用 npm:javascript
$ npm install axios
使用 cdn:html
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
掛載在vue的原型上 全局使用vue
首先在主入口文件main.js中引用,以後掛在vue的原型鏈上java
import axios from 'axios' Vue.prototype.$axios = axios
在vue組件中使用:node
this.$axios.get('/api/getList').then((res) => { this.newList = res.data.data }).catch(err => { console.log(err) })
結合 vue-axios使用ios
在main.js中引用npm
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios);
axios.get(url[, config])json
axios.delete(url[, config])axios
axios.post(url[, data[, config]])api
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
this.axios.get('/api/demo', { params: { id: 124, name: 'jerry' } }) 其實通常axios添加參數是 this.axios.get('/api/demo?id=124&&name='jerry) this.axios.delete('/api/demo', { data: { id: 123, name: 'Henry', sex: 1, phone: 13333333 } this.axios.post('/api/demo', { name: 'jack', sex: 'man' }) this.axios.put('/api/demo', { name: 'jack', sex: 'man' }) 在使用axios時,注意到配置選項中包含params和data二者,覺得他們是相同的,實則否則。 由於params是添加到url的請求字符串中的,用於get請求。 參數是以id=124&name=jerry的形式附到url的後面 而data是添加到請求體(body)中的, 用於post請求。 POST請求提交時,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST請求若是不指定請求頭RequestHeader,默認使用的Content-Type是text/plain;charset=UTF-8。
function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]).then( axios.spread(function (acct, perms) { // 兩個請求如今都執行完成 }));
axios
傳遞相關配置來建立請求axios(config)
// 發送 POST 請求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); //等同於如下寫法 axios.post('/user/12345', { firstName: 'Fred', lastName: 'Flintstone' }) // 獲取遠端圖片 axios({ method:'get', url:'http://bit.ly/2mTM3nY', responseType:'stream' }).then(function(response) { response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) });
{ // `url` 是用於請求的服務器 URL url: '/user', // `method` 是建立請求時使用的方法 method: 'get', // default // `baseURL` 將自動加在 `url` 前面,除非 `url` 是一個絕對 URL。 // 它能夠經過設置一個 `baseURL` 便於爲 axios 實例的方法傳遞相對 URL baseURL: 'https://some-domain.com/api/', // `headers` 是即將被髮送的自定義請求頭 headers: { Authorization: token } // `params` 是即將與請求一塊兒發送的 URL 參數 用於get請求 // 必須是一個無格式對象(plain object)或 URLSearchParams 對象 params: { ID: 12345 }, // `data` 是做爲請求主體被髮送的數據 // 只適用於這些請求方法 'PUT', 'POST', 和 'PATCH' data: { firstName: 'Fred' }, // `timeout` 指定請求超時的毫秒數(0 表示無超時時間) // 若是請求話費了超過 `timeout` 的時間,請求將被中斷 timeout: 1000, }
某個請求的響應包含如下信息
{ // `data` 由服務器提供的響應 data: {}, // `status` 來自服務器響應的 HTTP 狀態碼 status: 200, // `statusText` 來自服務器響應的 HTTP 狀態信息 statusText: 'OK', // `headers` 服務器響應的頭 headers: {}, // `config` 是爲請求提供的配置信息 config: {}, // 'request' // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance the browser request: {} }
axios支持Promise對象,因此獲取響應值 用then axios.get('/user/12345') .then(function(res) { console.log(rese.data); console.log(res.status); console.log(res.statusText); console.log(res.headers); console.log(res.config); });
能夠用catch作錯誤處理
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"; axios.defaults.headers.common['Authorization'] = ''; // 設置請求頭爲 Authorization axios.defaults.timeout = 200; 在超時前,全部請求都會等待 2.5 秒
axios.get("/user/12345") .catch(function (error) { if (error.response) { // 請求已發出,但服務器響應的狀態碼不在 2xx 範圍內 console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else { // Something happened in setting up the request that triggered an Error console.log("Error", error.message); } console.log(error.config); });
能夠使用 validateStatus
配置選項定義一個自定義 HTTP 狀態碼的錯誤範圍。
axios.get("/user/12345", { validateStatus: function (status) { return status < 500; // 狀態碼在大於或等於500時纔會 reject } })
能夠自定義攔截器,在在請求或響應被 then
或 catch
處理前攔截它們。
// 添加請求攔截器 axios.interceptors.request.use(function (config) { // 在發送請求以前作些什麼 return config; }, function (error) { // 對請求錯誤作些什麼 return Promise.reject(error); }); // 添加響應攔截器 axios.interceptors.response.use(function (response) { // 對響應數據作點什麼 return response; }, function (error) { // 對響應錯誤作點什麼 return Promise.reject(error); });
//配置發送請求前的攔截器 能夠設置token信息 axios.interceptors.request.use(config => { //loading開始 //加載進度條 loadingInstance.start(); let token = localStorage.getItem("x-auth-token"); // 給全部請求帶上token if (token) { // 判斷是否存在token,若是存在的話,則每一個http header都加上token config.headers.token = `${token}`; } return config; }, error => { //出錯,也要loading結束 loadingInstance.close(); return Promise.reject(error); }); // 配置響應攔截器 axios.interceptors.response.use(res => { //loading結束 loadingInstance.close(); //這裏面寫所須要的代碼 if (res.data.code == '401') { //全局登錄過濾,當判讀token失效或者沒有登陸時 返回登錄頁面 return false; }; return Promise.resolve(res); }, error => { loadingInstance.close(); return Promise.reject(error); })
axios會默認序列化 JavaScript 對象爲 JSON
axios中POST的默認請求體類型爲Content-Type:application/json(JSON規範流行)這也是最多見的請求體類型,也就是說使用的是序列化後的json
格式字符串來傳遞參數,如:{ "name" : "mike", "sex" : "male" }
;同時,後臺必需要以支持@RequestBody
的形式接收參數,不然會出現前臺傳參正確,後臺接收不到的狀況。
若是想要設置類型爲Content-Type:application/x-www-form-urlencoded
(瀏覽器原生支持),axios
提供了兩種方式,以下:
URLSearchParams
const params = new URLSearchParams(); params.append('param1', 'value1'); params.append('param2', 'value2'); axios.post('/user', params);
qs
默認狀況下在安裝完axios後就能夠使用qs
庫 選擇使用qs庫編碼數據:
const qs = require('qs');0 axios.post('/foo', qs.stringify({ 'bar': 123 }));