尤雨溪之前在微博釋出訊息，不再繼續維護vue-resource，並推薦大家開始使用 axios 。

一、axios 簡介

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它本身具有以下特徵

• 從瀏覽器中建立 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支援 Promise API
• 攔截請求和響應
• 轉換請求和響應資料
• 取消請求
• 自動轉換JSON資料
• 客戶端支援防止 CSRF/XSRF

二、引入方式：

npm:

123	$ npm install axios//淘寶源$ cnpm install axios

bower:

1	$ bower install axios

cdn:

1	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三、vue中axios的配置

之前那個開源專案一開始就打算用axios，在網上找了好多文章與攻略，發現好多都不太詳細，所以打算自己動手配置一個，(不要慫，擼起袖子就是幹)。

我的配置：

import axios from 'axios'import qs from 'qs'import * as _ from '../util/tool'axios.defaults.timeout = 5000; //響應時間axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置請求頭axios.defaults.baseURL = '你的介面地址'; //配置介面地址//POST傳參序列化(新增請求攔截器)axios.interceptors.request.use((config) => { //在傳送請求之前做某件事 if(config.method === 'post'){ config.data = qs.stringify(config.data); } return config;},(error) =>{ _.toast("錯誤的傳參", 'fail'); return Promise.reject(error);});//返回狀態判斷(新增響應攔截器)axios.interceptors.response.use((res) =>{ //對響應資料做些事 if(!res.data.success){ // _.toast(res.data.msg); return Promise.reject(res); } return res;}, (error) => { _.toast("網路異常", 'fail'); return Promise.reject(error);});//返回一個Promise(傳送post請求)export function fetch(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response => { resolve(response.data); }, err => { reject(err); }) .catch((error) => { reject(error) }) })}

四、vue中使用配置好的axios

123456789101112131415161718192021

export default { /** * 使用者登入 */ Login(params) { return fetch('/users/api/userLogin', params) }, /** * 使用者註冊 */ Regist(params) { return fetch('/users/api/userRegist', params) }, /** * 傳送註冊驗證碼 */ RegistVerifiCode(tellphone) { return fetch('/users/api/registVerifiCode', {tellphone: tellphone}) }, ......}

好了，溜了溜了。。。