Axios请求的请求方式以及传参

Axios 是一个流行的基于 Promise 的 HTTP 客户端

1.链式书写方式

GET请求

axios.get(url, {
  params: {
    key1: 'value1',
    key2: 'value2'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

POST请求

发送 JSON 数据：

axios.post(url, {
    key1: 'value1',
    key2: 'value2'
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

在 POST 请求中，将数据对象直接传递给 axios.post 方法。Axios 会自动将对象转换为 JSON 字符串并设置请求头 Content-Type: application/json。

发送表单数据:

let formData = new FormData()
formData.append('name','张三')
formData.append('age',18)
axios.post(url,formData).then(res=>{}).catch(err=>{})

 设置请求头和其他配置

设置请求头

const config = {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
    // 其他自定义头部
  }
};

axios.post('http://example.com/api/post', postData, config)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

通过在请求的配置对象 config 中设置 headers 属性，可以传递自定义的请求头信息.

 处理请求和响应

请求拦截器和响应拦截器

// 请求拦截器
axios.interceptors.request.use(config => {
  // 在请求发送之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response;
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error);
});

2.axios(config) 书写方法

通过传递一个配置对象 config 来发送请求，这种发送方式可以达到发送各类请求

axios({
  method: 'get',
  url: 'http://example.com/api',
  params: {
    key1: 'value1',
    key2: 'value2'
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

可以使用这种方式发送各种请求，get请求携带params参数method为‘get’,post请求携带data参数 method为‘post’