使用 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