在线定制头像免费_赣州网络公司电话_seo优化内容_关键词的分类和优化

网络请求库-axios

前提：原生的网络请求

• XMLHttpRequest
• fetch(浏览器提供的)
  • 原生网络请求的缺点:
    • 一般不采用原生网络请求，需要对它进行简单的封装
    • 原生某些功能不具备，需要自己来完成
      • 请求拦截/响应拦截
    • JS(运行环境) ->浏览器/Node(不适配)
      • fetch -> 浏览器
      • Http -> Node

1.认识axios库

• 为什么选择axios? 作者推荐和功能特点
  • 功能特点：
    • 在浏览器中发送XMLHttpRequests请求
    • 在node.js中共发送http请求
    • 支持Promise API
    • 拦截请求和响应
    • 转换请求和响应数据
    • 等等
  • 补充:axios名称的由来？ 个人理解
    • 没有具体的翻译
    • axios:ajax i/o system

2.axios发送请求

• axios1请求方式

  • 支持多种请求方式：
    • axios(config)
    • axios.request(config)
    • axios.get(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/post/delete/put’,
  • 请求根路径
    • baseURL:‘https://www.mt.com/api’
  • 请求钱的数据处理
    • transformRequest:[function(data){}]
  • 请求后的数据处理
  • transformResponse:[function(data){}]
  • 自定义的请求头
    • headers:{‘x-Request-width’: ‘XMLHttpRequest’}
  • URL查询对象
    • params: { id: 1222 }
  • 查询对象序列化函数
    • paramsSerialize: function(params) {}
  • request body
    • data: { key: ‘abc’ }
  • 超时设置
    • timeout: 1000

3.axios创建实例

• 为什么要创建axios的实例呢？
  • 当我们从axios模块中导入对象时，使用的实例是默认的实例；
  • 当给该实例设置一些默认配置时，这些配置就被固定下来了
  • 但是后续开发中，某些配置可能会不太一样；
  • 比如某些请求需要使用特定的baseURL或者timeout等
  • 这个时候，可以创建新的实例，并且导入属于该实例的配置信息

    // axios默认库提供给我的实例对象// axios.get('http://123.207.32.32:9001/lyric?id=500665346')// 创建其他的实力发送网络请求const instance1 = axios.create({baseURL: 'http://123.207.32.32:9002',timeout: 6000,headers: {}})instance1.get('/lyric', {params: {id: 500665346}}).then((res) => {console.log('res.data===', res.data);})

4.axios的拦截器

• 请求和响应拦截器
  • axios的也可以设置拦截器：拦截每次请求和响应
    axios.interceptors.request.use(请求成功拦截，请求事变拦截)
    axios.interceptors.response.use(响应成功拦截，响应失败拦截)

        import axios from 'axios'axios.interceptors.request.use((config) => {// 设置一些请求头参数// config.headers['token'] = 'abcdef';// 请求拦截可做一些操作// 1.开始loading的动画// 2.对原来的配置进行一些修改// 2.1 header// 2.2 认证登录：token/cookie// 2.3 请求参数进行某些转化console.log('请求成功的拦截');return config}, (err) => {console.log('请求失败的拦截');return err})axios.interceptors.response.use((res) => {console.log('响应成功的拦截');// 1.结束loading的动画// 2.对数据进行转化，再返回数据return res.data},(err) => {console.log('响应失败的拦截');return err})

5.axios请求封装

// service.js
import axios from "axios"class HyRequest {constructor(baseURL, timeout=10000) {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, methods: 'get'})}post(config) {return this.request({...config, methods: 'post'})}
}const instance1 = new HyRequest('http://123.207.32.32:9002')
const instance2 = new HyRequest('http://123.207.32.32:8000')export default new HyRequest('http://123.207.32.32:9002')