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

一、特点：

  • 从浏览器中创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF

二、使用：

1.npm 安装：

npm install axios --save-dev

2.CDN方式使用：

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

三、在vue中使用：

1.局部使用：在组件中引入axios直接使用即可，但是我们一般将其挂载到全局

2.全局挂载：

  • 在main.js中： 
    import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

    然后在组件中使用this.axios即可调用

  • 在main中将axios挂载到vue的原型上：

    import axios from 'axios'
Vue.prototype.$ajax= axios

    然后再组件中使用this.$ajax即可调用

四、简单示例(基本的使用)：

  • 发送请求 
    //xxxxxx为请求地址
axios.get('xxxxxx')
  .then((data)=>{
    console.log(data);
  })
  .catch((error)=>{
    console.log(error);
  });

// 上面的请求可以这样做
axios.get('/user', {
    params: {
      user: 'liuhua'
    }
  })
  .then((data)=>{
    console.log(data);
  })
  .catch((error)=>{
    console.log(error);
  });

     

  • params会将请求的参数加入到下图里面去，即使是put,post等请求

 

  • 执行多个并发请求：
function getUserAccount() {
  return axios.get('/user/liuhua');
}
function getUserPermissions() {
  return axios.get('/user/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  })
  .catch(err=>{
    //console.log(err);
  })
);

五、axios常用的请求方法：

  • get：获取数据

  • post：提交数据（表单+文件上传等）

  • put：更新数据（将所有的数据推送到后端）

  • patch：更新数据（只将修改的数据推送到后端）

  • delete：删除数据

这只是一种规范，我们也完全可以通过post方法去修改数据，删除数据等。

六、创建axios实例：

当我们后端接口域名不止一个，或者超时时长不一样的时候就可以通过创建axios实例

//实例1
let instance=axios.create({
    baseURL:'http://localhost:8080',
    timeout:1000  //超时时长，如果发起http请求，超过这个时间还未收到数据，就会报错（超时错误）
})
instance.get('xxxxx').then(data=>{}).catch(err=>{})

//实例2
let axios2=axios.create({
    baseURL:'http://localhost:8081',
    timeout:2000
})
axios2.get('xxxxx').then(data=>{}).catch(err=>{})

1.axios全局配置：

axios.defaults.timeout=3000;

axios.defaults.baseURL='http://localhost:3000';

2.axios实例配置：

let instance=axios.create({

    baseURL:'http://localhost:3031',

    timeout:5000

})

实例已经创建完成，想要修改配置项

instance.defaults.timeout=3000;

3.axios请求配置：

axios.get('/data.json',{
    timeout:15000
})

优先级为 请求配置 > 实例配置 > 全局配置

可用配置参数：（这里借鉴https://www.kancloud.cn/yunye/axios/234845）

{
    url: '/user',   //请求路径
    method: 'get',  // 请求方法，默认是 get
    baseURL: 'https://some-domain.com/api/',  //接口域名`baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL
    timeout:1000,  //请求的超时时长（ms）
    headers:{},     //设置请求头
    params:{},   //请求参数拼接到url上
    data:{},   //请求参数放到请求体里
    withCredentials: false, // 默认的，withCredentials` 表示跨域请求时是否需要使用凭证
    transformRequest: [function (data) {  //允许在向服务器发送前，修改请求数据；只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法；后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
        // 对 data 进行任意转换处理
        return data;
    }],
    transformResponse: [function (data) {  // 在传递给 then/catch 前，允许修改响应数据
    // 对 data 进行任意转换处理

        return data;
    }],
    paramsSerializer: function(params) {  //是一个负责 `params` 序列化的函数
        return Qs.stringify(params, {arrayFormat: 'brackets'})
    },
    adapter: function (config) {  //允许自定义处理请求，以使测试更轻松
        /* ... */
    },
    auth: {  //表示应该使用 HTTP 基础验证，并提供凭据，这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
        username: 'janedoe',
        password: 's00pers3cret'
    },
    responseType: 'json', // 默认的，表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    xsrfCookieName: 'XSRF-TOKEN', // default ，是用作 xsrf token 的值的cookie的名称
    xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的，是承载 xsrf token 的值的 HTTP 头的名称
    onUploadProgress: function (progressEvent) {  //允许为上传处理进度事件
        // 对原生进度事件的处理
    },
    onDownloadProgress: function (progressEvent) {  //允许为下载处理进度事件
      // 对原生进度事件的处理
    },
    maxContentLength: 2000,  //定义允许的响应内容的最大尺寸
    validateStatus: function (status) {  //定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
        return status >= 200 && status < 300; // 默认的
    },
    maxRedirects: 5, // 默认的，定义在 node.js 中 follow 的最大重定向数目
    httpAgent: new http.Agent({ keepAlive: true }),  //`httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
    httpsAgent: new https.Agent({ keepAlive: true }),
    proxy: {  //'proxy' 定义代理服务器的主机名称和端口；`auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据；这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
        host: '127.0.0.1',
        port: 9000,
        auth: : {
          username: 'mikeymike',
          password: 'rapunz3l'
        }
    },
    cancelToken: new CancelToken(function (cancel) {  //指定用于取消请求的 cancel token
    })
}

七、axios拦截器：

在请求或响应被处理前拦截他们==>请求拦截器，响应拦截器

请求拦截器：

// 添加请求拦截器
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);
});

移除拦截器：

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

例子：

//需要登录的接口
let instance=axios.create();
instance.interceptors.request.use({
    (config=>{
        config.headers.token='';
        return config;
    })
})

//不需要登录的接口
let instances2 = axios.create()

这样我们就可以通过instance实例来访问需要登录的接口，通过instance2来访问不需要登录的接口

八、错误处理：

在请求错误时进行的处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
});

可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 状态码在大于或等于500时才会 reject
  }
})

在实际开发中，一般添加统一的错误处理

let instance=axios.create();
instance.interceptors.request.use(
    config=>{
        return config;
    },err=>{
        //请求错误，一般http状态码以4开头
        return Promise.reject(err)
    }
)

instance.interceptors.response.use(
    res=>{
        return res;    
    },err=>{
        //响应错误处理，一般http状态码以5开头
        $('#err_box').show();    //如果错误就让提示框显示
        return Promise.reject(err);
    }
)

九、取消请求：

用于取消正在进行的http请求，在实际开发中使用并不多

使用 cancel token 取消请求

可以使用 CancelToken.source 工厂方法创建 cancel token

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的，取消请求的信息，会进入到上面例子中的thrown.message中）
source.cancel('Operation canceled by the user.');

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

本文大量借鉴：https://www.kancloud.cn/yunye/axios/234845

 

 

# 前端
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

玩转 AIGC 工具，早点下班！

avatar CSDN学习社区
cover

用 OpenAI Assistants 做大模型应用开发

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区