澄迈住房和城乡建设局网站,微网站免费注册,机关网站建设的请示,域名停域app免费下载目录 1_认识Axios库2_axios发送请求3_axios创建实例4_axios的拦截器5_axios请求封装 1_认识Axios库 功能特点: 在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据 2_axios发送请求 支持多种请求方式: axios… 目录 1_认识Axios库2_axios发送请求3_axios创建实例4_axios的拦截器5_axios请求封装 1_认识Axios库 功能特点: 在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据 2_axios发送请求 支持多种请求方式: axios(config)axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]]) 有时候, 可能需求同时发送两个请求 使用axios.all, 可以放入多个请求的数组.axios.all([]) 返回的结果是一个数组使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2 常见的配置选项 前三个选项常用 请求地址 url: ‘/user’, 请求类型 method: ‘get’, 请求根路径 baseURL: ‘http://www.mt.com/api’, 请求前的数据处理 transformRequest:[function(data){}], 请求后的数据处理 transformResponse: [function(data){}], 自定义的请求头 headers:{‘x-Requested-With’:‘XMLHttpRequest’}, URL查询对象 params:{ id: 12 } 查询对象序列化函数 paramsSerializer: function(params){ } request body为 data: { key: ‘aa’}, 超时设置 timeout: 1000, demo1 // 1.发送request请求 axios.request({url: http://123.207.32.32:8000/home/multidata,method: get }).then(res {console.log(res:, res.data) })// 2.发送get请求 axios.get(http://123.207.32.32:9001/lyric?id500665346).then(res {console.log(res:, res.data.lrc) }) axios.get(http://123.207.32.32:9001/lyric, {params: {id: 500665346} }).then(res {console.log(res:, res.data.lrc) })// 3.发送post请求 axios.post(http://123.207.32.32:1888/02_param/postjson, {data: {name: coderwhy,password: 123456} }).then(res {console.log(res, res.data) })demo2 // 1.baseURL const baseURL http://123.207.32.32:8000// 给axios实例配置公共的基础配置 axios.defaults.baseURL baseURL axios.defaults.timeout 10000 axios.defaults.headers {}// 1.get: /home/multidata axios.get(/home/multidata).then(res {console.log(res:, res.data) })// 2.axios发送多个请求 // Promise.all axios.all([axios.get(/home/multidata),axios.get(http://123.207.32.32:9001/lyric?id500665346) ]).then(res {console.log(res:, res) })3_axios创建实例 从axios模块中导入对象时, 使用的实例是默认的实例 当给该实例设置一些默认配置时, 这些配置就被固定下来了.但是后续开发中, 某些配置可能会不太一样比如某些请求需要使用特定的baseURL或者timeout等.这时,就可以创建新的实例, 并且传入属于该实例的配置信息 // axios默认库提供实例对象 axios.get(http://123.207.32.32:9001/lyric?id500665346)// 创建其他的实例发送网络请求 const instance1 axios.create({baseURL: http://123.207.32.32:9001,timeout: 6000,headers: {} })instance1.get(/lyric, {params: {id: 500665346} }).then(res {console.log(res:, res.data) })const instance2 axios.create({baseURL: http://123.207.32.32:8000,timeout: 10000,headers: {} }) 4_axios的拦截器 axios的也可以设置拦截器拦截每次请求和响应 axios.interceptors.request.use(请求成功拦截, 请求失败拦截)axios.interceptors.response.use(响应成功拦截, 响应失败拦截) demo // 对实例配置拦截器 //【请求】 axios.interceptors.request.use((config) {console.log(请求成功的拦截)// 1.开始loading的动画// 2.对原来的配置进行一些修改// 2.1. header// 2.2. 认证登录: token/cookie// 2.3. 请求参数进行某些转化return config }, (err) {console.log(请求失败的拦截)return err }) //【响应】 axios.interceptors.response.use((res) {console.log(响应成功的拦截)// 1.结束loading的动画// 2.对数据进行转化, 再返回数据return res.data }, (err) {console.log(响应失败的拦截:, err)return err })axios.get(http://123.207.32.32:9001/lyric?id500665346).then(res {console.log(res:, res) }).catch(err {console.log(err:, err) })5_axios请求封装 便于以后突发情况比如axios库不再维护 import axios from axiosclass HYRequest {constructor(baseURL, timeout10000) {this.instance axios.create({baseURL,timeout})}request(config) {return new Promise((resolve, reject) {this.instance.request(config).then(res {resolve(res.data)}).catch(err {reject(err)})})}get(config) {return this.request({ ...config, method: get })}post(config) {return this.request({ ...config, method: post })} }export default new HYRequest(http://123.207.32.32:9001)