axios的基本使用方法与配置

axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

axios特点

• 基于promise的异步ajax请求库
• 浏览器端/node端都可以使用
• 支持请求/响应拦截器
• 支持请求取消
• 请求/响应数据转换
• 批量发送多个请求
• 客户端支持防御 XSRF

网站地址

• 官方网址
• 中文文档

安装方法

html中引入：

//Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

//Using unpkg CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

//BootCDN(部署在国内服务器上)
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

项目中引入

Using npm:
npm install axios

Using bower:
bower install axios

Using yarn:
yarn add axios

axios API

可以通过向 axios 传递相关配置来创建请求

axios基本用法(GET POST PUT DELETE)

• 具体如何传递参数,还要和后端进行配合

GET

axios({
    url:'http://localhost:5000/getList',
    method:'get',
    params:{
        id:1
    },
}).then((res)=>{
	console.log(res)
})

//get请求不带参数
axios.get('http://localhost:5000/getList').then((res)=>{
	console.log(res)
})
//get请求带参数
//方法一 将参数拼接到url后面
axios.get('http://localhost:5000/getList?id=1').then((res)=>{
	console.log(res)
})
//方法二 使用config配置对象,注意:params是config中的属性,不要当成方法中的第二个参数.
axios.get('http://localhost:5000/getList',{params:{id:1}}).then((res)=>{
	console.log(res)
})

POST

axios({
    url:'http://localhost:5000/newList',
    method:'post',
    data:{
        title:'xxx',
        content:'xxx'
    }
}).then((res)=>{
	console.log(res)
})

axios.post('http://localhost:5000/newList',{title:'xxx',content:'xxx'}).then((res)=>{
	console.log(res)
})

PUT

axios({
    url:'http://localhost:5000/updateList',
    method:'put',
    data:{
        title:'xxx',
        content:'xxx'
    },
    params:{
        id:1
	}
}).then((res)=>{
	console.log(res)
})

axios.put('http://localhost:5000/updateList?id=1',{title:'xxx',content:'xxx'}).then((res)=>{
	console.log(res)
})

axios.put('http://localhost:5000/updateList',{title:'xxx',content:'xxx'},{params:{id:1}}).then((res)=>{
	console.log(res)
})

DELETE

axios({
    url:'http://localhost:5000/deleteList',
    method:'put',
    params:{
        id:1
	}
}).then((res)=>{
	console.log(res)
})

axios.delete('http://localhost:5000/deleteList?id=1').then((res)=>{
	console.log(res)
})

axios.delete('http://localhost:5000/deleteList',{params:{id:1}}).then((res)=>{
	console.log(res)
})

axios常用配置对象

{
   // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  data: {
    firstName: 'Fred'
  },
      
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
}
  
 //详细配置见官方文档

axios的默认配置

//配置对象中的属性都可以修改位默认配置
axios.default.method= "GET";
axios.default.baseURL="https://api.shop.eduwork.cn";
axios({
    url:'/api/goods',
}).then((res)=>{
    console.log(res)
})

axios创建实例对象发送请求

• 给axios添加默认配置每次都要写axios.default，所以，可以直接创建一个axios实例对象;
• 当项目中需要给不同服务器发送请求时,可以创建多个axios实例对象进行配置
• instance与axios对象的功能几近是一样的

const instance = axios.create({
    baseURL:"https://api.shop.eduwork.cn",
    timeout:8000
})
instance({
    url:'/api/goods',
    method:'get',
    }).then((res)=>{
    	console.log(res)
})

axios拦截器(Interceptors)

• 请求拦截器(对请求数据进行处理)
• 响应拦截器(对响应数据进行处理)
• 可以配置多个拦截器
• 执行顺序:请求拦截器 -> 发送请求 -> 响应拦截器 -> 返回数据

//请求拦截器
axios.interceptors.request.use(config=>{
    console.log("请求拦截器")
    console.log(config)
    return config
    },err=>{
    	return Promise.reject(err)
})
//响应拦截器
axios.interceptors.response.use(res=>{
    console.log("相应拦截器")
    console.log(res)
    return res
    },err=>{
    	return Promise.reject(err)
})

axios请求响应结果

config	请求提供的配置信息
data	响应体结果，axios自动将服务器结果进行了JSON解析，转为对象
headers	服务器响应的头
request	原生的AJAX请求对象
status	服务器响应的 HTTP 状态码
statusText	服务器响应的 HTTP 状态信息

axios取消请求

<button style="background-color:deepskyblue" onclick="post()">发送POST请求</button>


let cancle = null;
function post(){
    //检测上一次请求是否完成
    if(cancle!=null){
    	cancle();
    }
    axios({
        url:"/api/auth/login",
        method:"post",
        data:{
        email:"test@a.com",
        password:'123123'
        },
        // 添加配置对象属性
        cancelToken:new axios.CancelToken(function(c){
        // 将c赋值给cancle
        	cancle=c
        })
    }).then((res)=>{
        console.log(res);
        // 将cancle的值初始化
        cancle=null;
    })
}