axios学习笔记

直接正题

安装并使用axios

vue-cli中并不自带axios，所以我们需要自己安装axios
进入项目目录，然后进行安装

npm install axios --save

安装完以后接下来就是使用axios

import axios from "axios"

axios({
  url: "url",
  method: "get",    //默认是get，如果是post，底下的params应该换成data
  params: ""        //默认是get请求方式，get请求方式的话，拼接数据需要用params
}) .then(res => {
  console.log(res)
})

axios有很多种使用方式，还有很多种方法
1.axios()
2.axios.request()
3.axios.get()
4.axios.post()
...

多个异步请求

当然，这只是基础用法，如果我们需要同时进行2个异步请求时，可以使用axios.all()

import axios from "axios"
axios.all([
  axios({
    url: "",
    method: "post",
    data: ""
  }),
  axios({
    url: "",
    method: "post",
    data: ""
  }),
]).then(res => {
  
})

//上边的then还可以有另一种写法
axios.all([
  axios({
    url: "",
    method: "post",
    data: ""
  }),
  axios({
    url: "",
    method: "post",
    data: ""
  }),
]).then(axios.spread((res1,res2) => {
  console.log(res1,res2)
}))

公共配置

说完这些啊，有没有感觉有些时候一些相同的配置重复写的话，会很没有必要呢？所以可以配置一些公共配置

axios.defaults.baseURL = "这里是个公共的url"
axios.defaults.timtout = 5000      //请求超时时间，毫秒单位

那么有哪些可以进行一键配置呢？
1.请求地址：url:"/user"
2.请求类型：method:"get/post"
3.请求根路径：baseURL:"http://www.baidu.com/api"
4.请求前的数据处理：transformRequest:[function(data){}]
5.请求后的数据处理：transformResponse:[function(data){}]
6.自定义的请求头：headers{'x-Requested-With':'XMLHttpRequest'}
7.URL查询对象：params:{id:12}
8.查询对象序列化函数：paramsSerializer:function(params){}
9.request body：data{id:1}
10.超时设置：timeout:1000,
11.跨域是否带Token：withCredentials:false
12.自定义请求处理：adapter:function(resolve,reject,config){}
13.身份验证信息：auth:{uname:' ',pwd:'12'}
14.响应的数据格式：json/blob/document/arraybuffer/text/stream
responseType:'json'

创建axios实例

有些时候，几个axios请求用的是同样的配置，可是另外个axios用的是另一种配置，这个时候配置的默认配置可能就不是很合适了，那么怎么解决呢？
创建各自的axios实例

const instance1 = axios.create({
  baseURL: "https://www.baidu.com/",
  timeout: 5000
})

instance1({
  url: "/home",
  params:{}
})

axios模块封装

实际项目中，我们很多组件肯定都需要使用到axios，那么每个组件都单独引入axios来使用的话，不易维护，那么我们就可以封装一个异步请求模块，这样我们使用的时候只需要调这个模块，如果需要改什么东西的话只需要改这个模块就可以，不需要单独动每个组件
新建一个network文件夹，里边新建一个叫request.js的文件

<!--request.js-->
import axios from "axios"

export function request(config){
  const instance = axios.create({
    baseURL: "http://www.baidu.com/",
    timeout: 5000
  })

  return instance(config)
}


<!--调用axios模块的组件中-->
import {request} from "network/request.js"
request({
  url: "/home",
  params:{
    id:1
  }
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

这样就可以在我们每个单独的组件中使用啦！