Aixos
1、Aixos特性
（1）支持Promise API
（2）拦截请求和响应
（3）装换请求数据和响应数据
（4）取消请求
（5）自动转换JSON数据
（6）客户端支持防御XSRF
2、Axios基础用法
get post put等请求方法
3、Axios进阶用法
实例 配置 拦截器 取消请求
4、Axios进一步封装
Axios基础用法
文档：https://www.npmjs.com/package/axios
1、axios请求方法
get # 获取数据 post # 提交数据（表单提交+文件上传） put # 更新数据（所有数据推送到后端） patch # 更新数据（只将修改的数据推送到后端） delete # 删除数据
2、项目环境搭建
# 安装vue $ npm install -g @vue/cli --registry=https://registry.npm.taobao.org $ npm install -g serve $ vue --version # 3.9.3 $ npm uninstall -g @vue/cli # 卸载 $ vue create hello-world # 创建项目 （1）选择自定义，增加以下两个选项 router css processer （2）选择默认配置，可以自定义添加以下3个插件 $ vue add @vue/eslint # 安装插件 $ vue add router $ vue add vuex $ cd hello-world $ npm run serve # 启动项目 $ npm run build # 打包压缩 # -s 参数的意思是将其架设在 Single-Page Application 模式下 # 这个模式会处理即将提到的路由问题 serve -s dist
安装axios
npm install axios3、路由引入
// 方式一 // 不管有没有访问都加载 import Home from './views/Home.vue' component: Home // 方式二 // 访问时才加载，异步加载，懒加载 component: () => import('./views/Home.vue')
4、axios在vue项目中使用实例
import Axios from "axios"; export default { name: "mydata", created() { let data = { name: "Tom" }; /** * GET * /getData.json?name=Tom */ Axios.get("/getData.json", { params: data }).then(response => { console.log(response); }); /** * POST */ // Content-Type: application/json Axios.post("/PostJsonData.json", data).then(response => { console.log(response); }); // Content-Type: multipart/form-data let formData = new FormData(); for (let key in data) { formData.append(key, data[key]); } Axios.post("/PostFormData.json", formData).then(response => { console.log(response); }); // Content-Type: application/x-www-form-urlencoded import qs from 'qs'; Axios.post("/PostFormData.json", qs.stringify(data)).then(response => { console.log(response); }); /** * PUT * Content-Type: application/json */ Axios.put("/PutData.json", data).then(response => { console.log(response); }); /** * PATCH * Content-Type: application/json */ Axios.patch("/PatchData.json", data).then(response => { console.log(response); }); /** * DELETE */ // /DeleteData.json?name=Tom Axios.delete("/DeleteData.json", { params: data }).then(response => { console.log(response); }); // Content-Type: application/json Axios.delete("/DeleteData.json", { data: data }).then(response => { console.log(response); }); /** * Axios */ Axios({ url: "/url", method: "GET", params: data, // url 参数 data: data // 请求体参数 }).then(response => { console.log(response); }); } }；
5、并发请求
同时进行多个请求，并统一处理返回值
/** * 并发请求 */ Axios.all([ Axios.get("/data.json"), Axios.get("/city.json") ]).then( Axios.spread((dataRes, cityRes) => { console.log(dataRes, cityRes); }) );
axios进阶用法
1、axios实例
后端接口地址有多个，并且超时时长不一样
代码实例
import axios from "axios"; export default { name: "axiosDemo", created() { let instance = axios.create({ baseURL: "http://localhost:8080", timeout: 1000 // 1s }); instance.get("/data.json").then(response => { console.log(response); }); } };
2、axios配置参数
参数 |
说明 |
示例 |
baseURL |
请求的域名，基本地址 |
“http://localhost:8080” |
timeout |
请求超时时长，毫秒 |
1000 |
url |
请求路径 |
“/data.json” |
method |
请求方法 |
“get/post/put/patch/delete” |
headers |
请求头 |
{“token”: “”} |
params |
url参数 |
{} |
data |
body参数 |
{} |
(1) axios全局配置
axios.defaults.baseURL = "http://localhost:8080"; axios.defaults.timeout = 1000;
(2) axios实例配置
let instance = axios.create(); instance.defaults.timeout = 2000;
(3) axios请求配置
instance.get("data.json", { timeout: 3000 });
3、实际开发示例
有两个请求接口
let instance1 = axios.create({ baseURL: "http://localhost:8081", timeout: 1000 }); let instance2 = axios.create({ baseURL: "http://localhost:8082", timeout: 2000 }); /** 用到的参数 * baseURL、timeout、method、params */ instance1.get("/data.json", { params: {"name": "Tom"} }).then( response => {} ); /** 用到的参数 * baseURL、timeout、method */ instance2.get("/data.json", { timeout: 5000 // 重新赋值 }).then( response => {} );
4、axios拦截器
拦截器：在请你去或响应被处理前拦截它们
（1）请求拦截器
axios.interceptors.request.use( config => { // 在请求发送前处理 return config; }, err => { // 在请求错误时候处理 return Promise.reject(err); });
（2）响应拦截器
axios.interceptors.response.use( res => { // 在请求成功对响应数据处理 return config; }, err => { // 在响应错误时候处理 return Promise.reject(err); });
(3)取消拦截器
let interceptors = axios.interceptors.request.use( config => { config.headers = { auth: true }; return config; }); axios.interceptors.request.eject(interceptors);
代码实例
/** * 不需要登录的接口 */ let newInstance = axios.create({}); /** * 登录状态 token */ let instance = axios.create({}); instance.interceptors.request.use( config => { config.headers.token = "token"; return config; }); /** * 移动开发 */ let phoneInstance = axios.create({}); // 请求前显示弹框 phoneInstance.interceptors.request.use({ config => { $("#model").show(); return config; } }); // 请求后隐藏弹框 phoneInstance.interceptors.response.use({ res => { $("#model").hide(); return res; } })
5、axios错误处理
axios.interceptors.request.use( config => { return config; }, err => { return Promise.reject(err); }); axios.interceptors.response.use( res => { return config; }, err => { return Promise.reject(err); }); axios.get("/data.json").then( res => { // 请求成功 } ).catch( err => { // 请求错误 }) // 实际开发中，添加统一的错误处理 let instance = axios.create({}); instance.interceptors.request.use( config => { return config; }, err => { // 请求错误，一般http状态码以4开头，401超时，404 not find $("#model").show(); setTimeout(()={ $("#model").hide(); }, 2000); return Promise.reject(err); }); instance.interceptors.response.use( res => { return res; }, err => { // 响应错误，一般http状态码以5开头，500系统错误，502系统重启 $("#model").show(); setTimeout(()={ $("#model").hide(); }, 2000); return Promise.reject(err); }); instance.get("/data.json").then( res=>{ }).catch( err=>{ })
6、axios取消请求
取消正在进行的http请求
使用情况：商城 3-5秒
let source = axios.CancelToken.source(); axios.get("/data.json", { CancelToken: source.token }).then( res=>{ }).catch( err=>{ }); // 取消请求 message可选 source.cancel("cancel http");