当前位置： 移动技术网 > IT编程>开发语言>JavaScript > (axios)axios-1

(axios)axios-1

2020年07月27日  | 移动技术网IT编程  | 我要评论

最简单的axios用法

main.js

import axios from 'axios'

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

在这里插入图片描述

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网