学习网络请求模块——axios

x33g5p2x  于2021-11-21 转载在 iOS  
字(2.2k)|赞(0)|评价(0)|浏览(273)

axios

功能特点:

  • 在浏览器中发送XMLHttpRequests请求
  • 在node.js中发送http请求
  • 支持Proimse API
  • 拦截请求和响应
  • 转换请求和响应数据

axios基本使用

  1. 首先需要安装axios,npm stall aniox --save
  2. 安装完成后,需要在main.js中导入并简单使用axios(config)
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'

createApp(App).use(store).use(router).mount('#app')

axios({
  url:'http://123.207.32.32:8000/home/multidata
}).then(res=>{
  console.log(res);
})

axios发送并发请求

在开发中需要有时同时发送多个网络请求,如何用axios发送?

axios也有一个all方法可以处理并发网络请求问题

axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata',
  }),
  axios({
    url:'http://123.207.32.32:8000/home/data',
    params:{
      type:"pop",
      page:5
    }
  })
]).then((result) =>{
  console.log(result);
})

axios也有一个spread方法,可以展开数组

axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata',
  }),
  axios({
    url:'http://123.207.32.32:8000/home/data',
    params:{
      type:"pop",
      page:5
    }
  })
]).then(axios.spread((result1,result2) =>{
  console.log(result1);
  console.log(result2);
}))

全局配置

在上面的实例中,BaseURL是固定的,这时候可以进行一些抽取,也可以利用axios的全局配置

axios.defaults.baseURL= "http://123.207.32.32:8000"
axios.defaults.timeout = 5000

axios.all([
  axios({
    url:'/ho
    me/multidata',
  }),
  axios({
    url:'/home/data',
    params:{
      type:"pop",
      page:5
    }
  })
]).then(axios.spread((result1,result2) =>{
  console.log(result1);
  console.log(result2);
}))

axios实例

在上述的网络请求中,都是进行的全局配置,但是不一定每一个数据都来源于同一个服务器IP地址,所以需要axios实例化,分类操作

const instance = axios.create({
  baseURL:"http://123.207.32.32:8000",
  timeout:3000
})  //创建axios实例

instance({
  url:'/home/multidata'
}).then(res =>{
  console.log(res);
})

模块封装

单独在src中设置一个文件夹为network,然后在创建一个request.js文件

//request.js
import axios from 'axios'

export function request(config) {
  //1.创建axios实例
  const instance = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000
  })
  return instance(config)
}

可以这样使用:

request({
  url:"/home/multidata"
}).then(res =>{
  console.log("这是main.js中成功的request");
}).catch(err =>{
  console.log("这是main.js中失败的request");
})

拦截器

为什么要请求拦截:

  1. 比如config中的一些信息不符合服务器的要求。
  2. 比如每次发送网络请求时,都希望在界面中显示一个请求的图标
  3. 某些网络请求(比如登录(token)),必须携带一些特殊的信息

为什么要响应拦截:

  1. 请求到的返回数据中有许多是axios自行添加的,是我们所不需要的,就可以进行拦截过滤

请求拦截:

instance.interceptors.request.use(config =>{

  },err =>{

  })

需要传入两个函数,第一个函数是成功时的处理。注意!一定要把数据返回

响应拦截:

instance.interceptors.response.use(config =>{

  },err =>{

  })

相关文章

微信公众号

最新文章

更多