使用 cdn: ~~~ <script src="http://web.chengqige.com/myTool/axios/axios.min.js"></script> ~~~ ## *快速上手 ### [執行`GET`) ~~~ // 為給定 ID 的 user 創建請求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 上面的請求也可以這樣做 axios.get('/user', { params: { ID: 12345 } }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); ~~~ ## 執行 POST 請求 ~~~ axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); ~~~ ## axios在vue項目的綜合應用 在vue項目中我們需要對axios進行二次封裝，這樣可以便于抽離業務邏輯，使得模塊化更清晰，也便于項目后期維護上線 **request.js**（對axios的二次封裝） ~~~ // src/utils/request.js import axios from 'axios' // 自定義axios const ins = axios.create({ baseURL: 'http://121.89.205.189/admin', timeout: 6000 }) // 自定義攔截器 // 請求攔截器 ins.interceptors.request.use((config) => { config.headers.token = localStorage.getItem('token') || '' return config }, error => Promise.reject(error)) // 響應攔截器 ins.interceptors.response.use((response) => { //10119是后端未登錄的 if (response.data.code === '10119') { // +++++++++++++++++++++ window.location.href = "/#/login" } return response.data }, error => Promise.reject(error)) // 自定義各種數據請求 axios({}) export default function request (config) { const { url = '', method = '', data = {}, headers = {} } = config switch (method.toUpperCase()) { case 'GET': return ins.get(url, { params: data }) case 'POST': // 表單提交 application/x-www-form-url-encoded if (headers['content-type'] === 'application/x-www-form-url-encoded') { // 轉參數 URLSearchParams/第三方庫qs const p = new URLSearchParams() for (const key in data) { p.append(key, data[key]) } return ins.post(url, p, { headers }) } // 文件提交 multipart/form-data if (headers['content-type'] === 'multipart/form-data') { const p = new FormData() for (const key in data) { p.append(key, data[key]) } return ins.post(url, p, { headers }) } // 默認 application/json return ins.post(url, data) case 'PUT': // 修改數據 --- 所有的數據的更新 return ins.put(url, data) case 'DELETE': // 刪除數據 return ins.delete(url, { data }) case 'PATCH': // 更新局部資源 return ins.patch(url, data) default: return ins(config) } } ~~~ **api.js**（引入上面的request） ~~~ import request from 'request.js' export function getList(){ return request({ url:'/getList/all', method:'get' }) } ~~~ **index.vue**（在vue項目中使用接口） ~~~ <template> <div id="app"> <ul v-for="(item) in list"> <li>{{item}}</li> </ul> </div> </template> <script> import {getList} from 'api.js' export default{ data(){ return { list:[] } }, mounted(){ getlist().then(res=>{ this.list=res.data }) } } </script> ~~~ 原文 https://chengqige.com/axios/#/axios?id=axios