axios基础使用

一个淡定的打工菜鸟

发布于 2022-08-23 16:49:36

3740

发布于 2022-08-23 16:49:36

文章被收录于专栏：淡定的博客淡定的博客

axios 是 Vue 推荐的一款基于 Promise 的 AJAX 组件。所以我们在使用 Vue 进行项目开发时一般都使用这个库来执行 AJAX 请求。

发送请求

axios.get(url[,config])：发送GET请求
axios.post(url,data)：发送POST请求
axios.put(url,data[,config])：发送PUT请求
axios.delete(url[,config])：发送DELETE请求
axios.options(url[,config])：发送OPTIONS请求
axios.patch(url,data[,config])：发送PATCH请求
axios.head(url[,config])：发送HEAD请求
axios.request(config)：发送各种请求

Promise

Promise对象中提供了两个方法 then 和 catch：

then：请求执行成功时调用
catch：请求失败时调用

// 执行请求返回 Promise 对象
var ajax = axios.get('https://api.myjson.com/bins/nx1ge')

ajax.then((res)=>{
  console.log( res.data )    // 返回的数据
  console.log( res.status )  // 状态码
  console.log( res.statusText )    // 状态码文本
  console.log( res.headers )      // 响应的协议头信息
  console.log( res.config )     // 请求的参数
  console.log( res.request )    // 原生 XMLHttpRequest 对象
}).catch((err)=>{
  // 发送了请求，并且成功，但服务器返回状态码不是2xx时执行
  if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } 
    // 发送了请求，但服务器没有返回响应时执行
    else if (error.request) {
      // error.request 是原生的 XMLHttpRequest 对象
      console.log(error.request);
    } 
    // 发送请求时出错
    else {
      console.log('Error', error.message);
    }
    // 请求的配置项
    console.log(error.config);
})

axios配置

配置项	说明
url	请求地址
method	请求方法，默认是 default
baseURL	请求时的基地址
headers	设置 HTTP 头信息
params	请求时 URL 上的参数
data	请求时提交的数据，主要在PUT、POST、PATCH时使用
timeout	请求超时时间，单位：毫秒
responseType	指明服务器返回数据的类型，默认是JSON
onUploadProgress	上传文件时处理上传进程的回调函数
onDownloadProgress	下载时处理下载进度的回调函数

拦截器

在发送 AJAX请求前和处理AJAX响应前对数据进行拦截处理

// 在所有请求之前执行的代码
axios.interceptors.request.use(function (config) {
    // 处理请求前代码
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
 
// 当服务器返回数据时执行的代码
axios.interceptors.response.use(function (response) {
    // 请求成功时，拦截的代码
    return response;
  }, function (error) {
    // 请求失败时，拦截的代码
    return Promise.reject(error);
  });

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.01.01，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax