axios请求方法

axios中各种方法调用接口

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

可以提供以下服务:

1、从浏览器中创建XMLHttpRequests

2、从node.js创建http请求

3、支持PromiseAPI

4、拦截请求和响应

5、转换请求数据和响应数据

6、取消请求

7、自动转换JSON数据

8、客户端支持防御XSRF

get：获取数据
post：提交数据（表单提交+文件上传）
put：更新数据（所有数据推送到后端）
patch：更新数据（只将修改的数据推送到后端）
delete：删除数据

get方法

1.不带参数

axios.get(“/user”)

2.带参数

axios.get("/user",{
	params:{
		id:10,
		age:10
	}
}//请求的地址实际为 localhost:8080/user?id=10&age=10

注意这里是以对象的形式传参

简单的提一句所有的方法也可以这样写不过一般习惯于简写

axios({ methods: 'get', url: '/user' })//也就是直接axios({methods:请求方式，url:'路径'，params：{有就带没有就不带}})

post方法

主要提交表单数据和上传文件

axios.post("/user",
	params:{
		id:id
	}
)

注意这里以键值对的方式提交params就是键名,此处的params也可以省略，直接填写后面要传入的参数

delete方法

1.参数为普通的字符

axios.delete("/user",{
	params:{
		id:id
	}
})

2.参数为数组形式这里比较容易入坑

axios.delete("/user",{
	data:arr
})//其中arr=[1,2,3]的数组形式存在，键值必须是data

put方法

和post方法一样

axios.put("/user", data);

总结：以上方法中，get方式和delete方法带参数时比较特殊；但最为特殊的时delete方法带的参数为数组形式时。

axios.all请求多个请求

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
  }));

最下面来个常用格式

axios.get('/getUser?id=12345')
  .then(function (response) {
    console.log(response)
    this.setState({
      // ...
    })
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
axios.get('/getUser', {
    params: { // 这里的参数设置为URL参数（根据URL携带参数）
      id: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  }) 
 
async function getUser() {
  try {
    const response = await axios.get('/getUser?id=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

axios全局配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

axios的单一实例化配置

const instance = axios.create({
  baseURL: 'https://api.example.com'
});
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

axios拦截器的使用

可以使用axios拦截器来在发送请求之前或在响应response之前（then方法）来拦截请求并进行自定义的设置，定义request和response拦截器示例如下

axios.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });
 
axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    return Promise.reject(error);
  })

删除拦截器的时候

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);