欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

(axios)axios-1

程序员文章站 2022-08-15 19:32:27
最简单的axios用法main.jsimport axios from 'axios'axios({ url:'http://xxxx'}).then(res => { console.log(res);})axios发送并发请求使用axios.all()可以放个多个请求的数组axios.all([])返回的结果是一个数组,使用axios.spread()可以将数组展开axios.all([axios({ url:'xxx'}),axios({ url:'...

最简单的axios用法

main.js

import axios from 'axios'

axios({
  url:'http://xxxx'
}).then(res => {
  console.log(res);
})

(axios)axios-1

axios发送并发请求

  1. 使用axios.all()可以放个多个请求的数组
  2. axios.all([])返回的结果是一个数组,使用axios.spread()可以将数组展开
axios.all([axios({
  url:'xxx'
}),axios({
  url:'yyy',
  params: {
    type:'sell',
    page:5
  }
})])
  .then(res => {
    console.log(res);
})

axios.spread()

axios.all([axios({
  url:'http://xxx'
}),axios({
  url:'http://yyy',
  params: {
    type:'sell',
    page:5
  }
})])
  .then(axios.spread((res1,res2) => {
    console.log(res1);
    console.log(res2);
}))

全局配置

在上面的示例中,我们的BaseURL是固定的。

  • 事实上在开发中可能很多参数都是固定的。
  • 可以进行抽取,也可以利用axios的全局配置。
axios.defaults.baseURL = '123.200....'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

eg:这样同样能拿到结果

axios.defaults.baseURL = 'http://xxx'
axios({
  url:'/home/multidata'
  //更多配置选项
}).then(res => {
  console.log(res);
})

常见的配置选项:https://github.com/axios/axios : Request Config

请求地址 url: ‘/user’
请求类型 method: ‘get’
请求路径 baseURL: ‘https://some-domain.com/api/’
请求前的数据处理 transformRequest: [function (data){}]
请求后的数据处理 transformResponse: [function (data){}],
自定义请求头 headers: {‘X-Requested-With’: ‘XMLHttpRequest’}
URL查询对象 params:{}
延时 timeout: 1000
跨域是否带token withCredentials: false

注意post请求要把参数放到请求体data里,get不用

axios的实例

  • 当我们从axios模块中导入对象时使用的实例是默认的实例
  • 当给该实例设置一些默认配置时,这些配置就被固定下来了
  • 但是后续开发中,某些配置可能会不太一样:比如另一个页面的服务器地址完全不同
  • 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等
  • 这个时候就可以创建新的实例,并且传入属于该实例的配置信息

为了应对不在同一个ip地址 创建对于的axios的实例

const instance1 = axios.create({
  baseURL:'http://xxx',
})
instance1({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
})
instance1({
  url:'/home/data',
  params:{
    type:'pop',
    page:1
  }
}).then(res => {
  console.log(res);
})

//每个实例都有自己独立的配置
const instance2 = axios.create({
  baseURL:'...',
})

封装网络代码

request.js

//导出的形式使用函数 方便调用
import axios from 'axios'
export function request(config) {
     //1.创建实例
    const instance1 = axios.create({
    baseURL:'http://152.136.185.210:8000/api/n3'
    })
    //发送真正的网络请求
    return instance1(config)  //本身返回promise 直接return
  
}

使用

import {request} from './network/request'
request({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

拦截器

axios提供了拦截器,用于我们在发送每次请求或者得到响应后进行对应的处理。
四种:请求成功/失败、响应成功/失败

请求拦截:

//导出的形式使用函数 方便调用
import axios from 'axios'
export function request(config) {
    //1.创建实例
    const instance1 = axios.create({
    baseURL:'http://152.136.185.210:8000/api/n3'
    })
    //2.拦截器 axios.interceptors是全局 这里使用局部
    instance1.interceptors.request.use(a => {
      // console.log(a); //打印的都是配置信息 
      //比如每次发送网络请求 都希望显示请求图标
      //比如加上header 
      //某些网络请求(登录)必须携带一些特殊信息 如token 如果没有就跳转页面让用户先登录
      return a; //必须返回 不然会请求失败
    },err => {
      console.log(err);
    })

    //3.发送真正的网络请求
    return instance1(config)  //本身返回promise 直接return
  
}

响应拦截:

    instance1.interceptors.response.use(res => {
      return res.data
    },err => {
      console.log(err);
    })

本文地址:https://blog.csdn.net/qq_36663526/article/details/107566053

相关标签: 框架及插件