Axios基本用法

Axios基础

常见请求方式

GET 从客户端请求数据

POST 向服务器添加新数据

PUT 更新服务器端已存在的数据

DELETE 删除服务器端的数据

只是就一般而言

常见参数类型

1. query参数(查询字符串参数)

   www.bing.com?name=user&id=1

   编码格式:urlencoded

2. params参数

   www.bing.com/name/user/id/1

3. 请求体参数

   urlencoded格式:

   name=user&age=18

   Content-Type:www.bing.com

   json格式:

   {“name”:“user”,“id”:“1”}

   Content-Type:www.bing.com

注意

get请求没有请求体

api-doc可以生成api接口文档

安装

$ npm i axios

常用请求

GET

const axios = require('axios');

// 携带query参数
axios.get('/user?ID=12345')
  .then(
	(response)=>{response},//参是服务器响应对象
	(error)=>{error}//参是错误对象
)
  
// 携带query参数完整版
axios( {
    url:'/user',
    method:'GET',
    //注意!是params携带qurey参数
    params: {
      ID: 12345
    }
  })
.then(function (response) {
    // 处理成功
    console.log(response);
})
.catch(function (error) {
    // 处理错误
    console.log(error);
})
.then(function () {
    // 总是会执行
});

//携带params参数
axios( {
    url:'/user/12345',
    method:'GET',
  })//...

POST

axios.post('/user', {
    //默认是json编码
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//完整版写法
axios({
  method: 'post',
  url: '/user',
  data: {
    //默认是json编码
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
//urlencoded编码
axios({
  method: 'post',
  url: '/user',
  data: 'firstName: Fred,lastName: Flintstone'
});

多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
});

常用配置项

//全局配置
axios.defaults.timeout = 30000//配置超时时间
axios.defaults.headers = {}//携带请求头//请求头是一种令牌,可以标识自己的身份,一般用于权限管理
axios.defaults.baseURL = 'https://www.bing.com'//配置默认请求地址

//局部配置
axios( {
    url:'/user',
    method:'GET',
    params: {},
    timeout:30000,//配置超时时间
    headers:{},//携带请求头
    responseType:'json',//配置相应数据格式,默认json
})

又一个axios

新的axios没有取消请求和批量发请求的方法

const axios2 = axios.creact({
    //全局配置
    axios.defaults.timeout : 30000//配置超时时间
    axios.defaults.headers : {}//携带请求头//请求头是一种令牌,可以标识自己的身份,一般用于权限管理
    axios.defaults.baseURL : 'https://www.zcool.com.cn'//配置默认请求地址
})

axios拦截器

axios.interceptors.request.use((config)=>{
    //一般在这里加些特殊的请求头
    config.headers.token = ''
    return config//请求配置项
})

axios响应拦截器

axios.interceptors.respones.use(
	response=>{
        return response.data
    }
    error=>{
    	//可以在这里对错误进行统一处理
    	if(axios.isCancel(error)){
            console.log('用户取消了请求,原因是',error.massage)
		}else{}
    	return Promise.reject(err)//正常返回错误
	    return new Promise(()=>{})

		
    }
)

中断请求

axios({
    url:''
    cancelToken:new axios.CancelToken((c)=>{//参1是一个函数
        c('任性,就是要取消')//取消请求,可以赋值到全局到外面调用
    })
})