1000字带你详解axios

最新推荐文章于 2024-08-18 10:04:46 发布
最新推荐文章于 2024-08-18 10:04:46 发布
阅读量213 收藏
点赞数
分类专栏： vue 文章标签： vue http post vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43324909/article/details/106679094
版权

vue-axios

Axios是一个基于promise的HTTP库
并对响应回来的内容自动转换成 JSON类型的数据
浏览器支持情况：Chrome、Firefox、Safari、Opera、Edge、IE8+

引入

API

  • axios(config)
  • axios(url, [config])

config 配置对象

  • 常用配置对象
axios({
method:"get",// post、get、put....
  url:"/".//请求的路径
  baseurl:"/",//请求的域名 基本路径
  params: {}, // 会将请求参数拼接在url上
  data: {}, // 会将请求参数放在请求体中
  headers: {}, // 设置请求头，例如设置token等
  timeout: 1000, // 设置请求超时时长，单位：ms
  
})

例1

//当我们执行handleShow方法就会发送axios请求 
handleShow(){
        axios({
          method:'get',//发送get请求
          url:'https://developer.duyiedu.com/vue/getUserInfo',        
        })
      }
//也可以这样写
handleShow(){
        axios({
          method:'get',//发送get请求
          url:'/vue/getUserInfo',  
          baseURL:'https://developer.duyiedu.com'
          //它会把baseURL和url拼接在一起之后发送
        })
      }
当我们请求数据时
 handleShow(){
        axios({
          method:'get',//发送get请求
          url:'https://developer.duyiedu.com/vue/getUserInfo',        
        }).then(res=>{
          this.msg = res.data.msg
          this.personList = res.data.data
          console.log(res);
        })
      }

也可以写成两个参数的情况
 handleShow(){
        axios('/getUserInfo',{
          //第一参数设置为url的值
          method:'get',//发送get请求
          baseURL:'https://developer.duyiedu.com/vue',        
        }).then(res=>{
          this.msg = res.data.msg
          this.personList = res.data.data
          console.log(res);
        })
      }

在这里插入图片描述
在这里插入图片描述

方法别名 ，为了方便起见，给所有请求的方法提供了别名

  • 参数中有【】表示可选的 没有的【】是必须选择

API

  • axios.request(config)
  • axios.get(url, [config])
  • axios.post(url, [data], [config]])
  • axios.delete(url, [config])
  • axios.head(url, [config])
  • axios.put(url, [data], [config])
  • axios.patch(url, [data], [config]])
  • axios.options(url, [config])

例

   handleUpload(){
        const { name, mail} = this;
       axios.post('/setUserInfo',{name,mail},{
         baseURL:'https://developer.duyiedu.com/vue',         
       }).then(res=>{
         console.log(res);      
       })
      },
       //当我们执行这儿方法时 会发送一个数据


在这里插入图片描述

配置默认值

方法别名

为方便起见，为所有支持的请求方法提供了别名。

  • axios.request(config)
  • axios.get(url, [config])
  • axios.post(url, [data], [config]])
  • axios.delete(url, [config])
  • axios.head(url, [config])
  • axios.put(url, [data], [config])
  • axios.patch(url, [data], [config]])
  • axios.options(url, [config])

配置默认值

可以指定将被用在各个请求的配置默认值

全局配置

axios.defaults.baseURL = ‘https://developer.duyiedu.com/vue’;
axios.defaults.timeout = 1000;
在实际项目中，很少用全局配置。

axios.defaults.baseURL = 'https://developer.duyiedu.com/vue';
axios.defaults.timeout = 1000;
handleUpload(){
       const { name, mail} = this;
      axios.post('/setUserInfo',{name,mail},{
        //baseURL:'https://developer.duyiedu.com/vue',
        //因为全局配置了baseURL所以这里不用配置了，也可以发送
      }).then(res=>{
        console.log(res);      
      })
     },
      //当我们执行这里的方法时 会发送一个数据

实例配置

可以使用自定义配置新建一个axios实例

const instance = axios.create({
  baseURL:"",
  timeout:""
})
instance.post('/setLURL').then(res=>{
  //-----
})

请求配置

const instance = axios.create();
instance.get('/dd',{
tiemout100})

配置的优先顺序

如果全局 和实例和自己请求时 同时设置了baseURL:那么会发送的是自己请求的baseURL,
如果同时配置了全局 实例 和请求 那么优先级是这样的
全局 < 实例 < 请求

并发

同时进行多个请求，并统一处理返回值

  • axios.all(iterable)
  • axios.spread(callback)
axios.all([
  axios.get('/a'),
  axios.get('/b')
  ]).then(axios.spread(aRes,bRes)=>{
   consoloe.log(aRes,Bres)  
})

拦截器

interceptors，在发起请求之前做一些处理，或者在响应回来之后做一些处理。

请求拦截器

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;//config为配置的值拦截器执行后需要把配置后的信息返回
})

例

    <script>
      axios.defaults.baseURL = "https://developer.duyiedu.com/vue";
      axios.interceptors.request.use((config) => {
        console.log(config);
        return config;
      });
      const vm = new Vue({
        el: "#app",
        data: {
          name: "",
          mail: "",
          msg: "",
          personList: [],
        },
        methods: {
          handleUpload() {},
          handleShow(){
              axios.get('/getUserInfo').then(res=>{
              console.log(res);
              }
              )
          }
        },
      });
    </script>

在这里插入图片描述

响应拦截器

axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
})

也可以为配置的实例添加拦截器

const instance = axios.create();
    instance.interceptors.request.use();

移除拦截器

  • 当我们移除拦截器了 那么就不执行拦截器了
const myInterceptor = axios.interceptors.request.use(config => {});
axios.interceptors.request.eject(myInterceptor);

取消请求

用于取消正在进行的http请求：想取消谁的请求 就用到谁的身上
const source = axios.CancelToken.source();

    
const source = axios.CancelToken.source();
methods: {
          handleShow(){
              axios.get('/getUserInfo',{
                cancelToken:source.token
// 取消请求
              }).then(res=>{
              console.log(res);
              }
              )
          },
          handleCancelGet(){
            source.cancel(); 
          }
        },

在这里插入图片描述

methods: {
          handleShow() {
            axios
              .get("/getUserInfo", {
                cancelToken: source.token,
              })
              .then((res) => {
                console.log(res);
              }).catch(error=>{
                console.log(error);
                //error的值和设置的  source.cancel('取消请求了');值相关 
                //  source.cancel（）里面设置了什么 error就是什么 如果没有设置 就是undefined
               //  source.cancel（）里面设置了什么 error就是什么 如果没有设置 就是undefined
               const msg = error.messge;
               if(msg===0){
                 //;;;;
               }else if(msg===1){
                 //'''':可以根据msg的值 做一些其他的处理
             
            
            });
          },
          handleCancelGet() {
            source.cancel('取消请求了');
            //
          },

在这里插入图片描述

错误处理

在请求错误时进行的处理
error 是一个对象 request / response 是error的上下文，标志着请求发送 / 得到响应
在错误中，如果响应有值，则说明是响应时出现了错误。
如果响应没值，则说明是请求时出现了错误。
在错误中，如果请求无值，则说明是请求未发送出去，如取消请求。

  axios.defaults.baseURL = "https://developer.duyiedu.com/vue";
      axios.interceptors.request.use(
        (config) => {
          // console.log(config);
          return config;
        },
        // 我们通常在拦截器中处理错误，第2个参数为设置的error信息
        (error) => {
          //在request拦截器中 error的值是取消请求的值 我们通常把其他error放在reponse拦截器里使用
          return Promise.reject(error); //必须返回才可以
        }
      );
      axios.interceptors.response.use(
        (config) => {
          console.log(config);
          return config;
        },
        (error) => {
          // 只有在response里才能获得error.response和error.request信息
          if (error.response) {
                  const { status } = error.response;
                  switch (status) {
                    case 404:
                      alert("url错误");
                      break;
                    case 401: {
                      alert("iii");
                    }
                  }
                  console.log(error.response);
                } else if (error.request) {
                  console.log(error.request);
                }
                // 不会走到这里   请求未发出会在source.cancel("取消请求了");中单独处理
                //  else {
                //   console.log("请求未发出");
                // }
          return Promise.reject(error); //必须返回才可以
        }
      );

axios.get(’/user/12345’)
.catch(function (error) {
// 错误可能是请求错误，也可能是响应错误
if (error.response) {
// 响应错误
} else if (error.request) {
// 请求错误
} else {
console.log(‘Error’, error.message);
//请求未发出
}
console.log(error.config);
});

在实际开发过程中，一般在拦截器中统一添加错误处理
请求拦截器中的错误，会当请求未成功发出时执行，但是要注意的是：取消请求后，请求拦截器的错误函数也不会执行，因为取消请求不会抛出异常，axios对其进行了单独的处理。
在更多的情况下，我们会在响应拦截器中处理错误。

axios 预检

当axios的请求为非简单请求时，浏览器会进行预检，及发送OPTIONS请求。请求到服务器，询问是否允许跨域。如果响应中允许预检中请求的跨域行为，则浏览器会进行真正的请求。否则会报405错误。

  • 简单请求只要同时满足两个条件就是简单请求
    （1) 请求方法是以下三种方法之一：
    HEAD
    GET
    POST
    （2）HTTP的头信息不超出以下几种字段：
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart
    否则为非简单请求
    比如put delete方法的请求 发送json格式的ajax请求 带自定义头的ajax请求
   axios.interceptors.response.use(
        (config) => {
          console.log(config);
          return config;
        },
        (error) => {
          if (error.response) {
                  const { status } = error.response;
                  switch (status) {
                    case 404:
                      alert("url错误");
                      break;
                    case 401: {
                      alert("iii");
                    }
                  }
                  console.log(error.response);
                  console.log('响应时错误');
                  
                } else if (error.request) {
                  console.log(error.request);
                  console.log('请求时错误');
                  
                }
          return Promise.reject(error); //必须返回才可以
        }
      );   

methods: {
          handleShow() {
            axios
              .post("/setUserInfo1",{
                name:'zz',
                email:'222'
              }, {
                cancelToken: source.token,

              })//请求时错误//因为请求未发出去
            axios 预检
当axios的请求为非简单请求时，浏览器会进行预检，及发送OPTIONS请求。请求到服务器，询问是否允许跨域。
如果响应中允许预检中请求的跨域行为，则浏览器会进行真正的请求。否则会报405错误。

在这里插入图片描述在这里插入图片描述

           axios.interceptors.response.use(
        (config) => {
          console.log(config);
          return config;
        },
        (error) => {
          if (error.response) {
                  const { status } = error.response;
                  switch (status) {
                    case 404:
                      alert("url错误");
                      break;
                    case 401: {
                      alert("iii");
                    }
                  }
                  console.log(error.response);
                  console.log('响应时错误');
                  
                } else if (error.request) {
                  console.log(error.request);
                  console.log('请求时错误');
                  
                }
          return Promise.reject(error); //必须返回才可以
        }
      );    
             methods: {
          handleShow() {
            axios
              .post("/setUserInfo",{
                name:'zz',
                email:'222'
              }, {
                cancelToken: source.token,
              //响应时错误 发送出去了
              })

在这里插入图片描述

张小桌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios 不带cookie_axios携带cookie配置详解(axios+koa)
weixin_39975261的博客
12-20 408
话不多说，一个字，干！前端配置如下：axios.defaults.withCredentials = true; //配置为trueaxios.post('http://localhost:3000/tpzdz/vote/all', {openid: 'oJ0mVw4QrfS603gFa_uAFDADH2Uc',date: '2018-11-21'}).then(function (respons...
详解Axios统一错误处理与后置
10-17
本文将深入探讨如何使用Axios实现统一错误处理和后置处理。 首先，我们需要理解业务场景。假设后端通过HTTP状态码来标识接口的状态，错误信息存储在响应的`data`字段中。前端则利用Element-UI的`Message`组件来展示...
axios设置请求超时时间 timeout
Ivan的编程随笔
03-27 2万+
1.axios全局设置网络超时 axios.defaults.timeout = 30 * 1000; // 30s 2.单独对某个请求设置网络超时 axios.post(url, params, {timeout: 1000}) .then(res => { console.log(res); }) .catch(err=> { console...
axios 设置超时时间 — timeout
qq_43430897的博客
08-14 2840
全局设置网络超时时间 axios.defaults.timeout = 30 * 1000;
axios学习---官方文档翻译
xal
04-15 238
AXIOS Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 它有能做什么？ Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 安装 使用npm npm install axios //-g全局安装 -D当前项目安装 使
axios 设置超时时间 timeout
热门推荐
一片天空
05-31 7万+
全局设置网络超时 axios.defaults.timeout = 30000; 单独对某个请求设置网络超时 let timeout = parseInt(paramsTimeout); this.$ajax.post(url, params, {timeout: timeout}) .then(res => { console.log('response='+r...
axios详解
猫老板的豆
03-29 2255
Axios 是一个功能强大且易于使用的基于 Promise 的 HTTP 客户端库。可以用在浏览器和 node.js 中。这意味着它结合了 Promise 的特性和 HTTP 客户端的功能，为用户提供了一个强大且灵活的工具来发送 HTTP 请求和处理响应。
axios 使用详解
Baimoc
05-16 3万+
一、安装 cnpm install axios 二、使用 三种写法 // 第一种写法 axios.get('/query?name=tom').then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 第二种写法 axios.get('/query', { params: { name: 'tom' } })
Axios使用详解
m0_67942533的博客
10-06 5469
Axios使用详解
Axios详解
一步一个脚印，踏实努力，向着目标前进
06-21 1762
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它可以在浏览器中发送异步请求，并且还支持拦截请求和响应、转换请求和响应数据、取消请求等功能。总的来说，Axios 是一个功能强大且易于使用的 HTTP 客户端库，可以帮助开发者更方便地发送异步请求，并提供了许多实用的功能来处理请求和响应数据。它已经成为很多前端开发者首选的 HTTP 请求库之一。
详解Axios 如何取消已发送的请求
10-17
1. **通过 `CancelToken.source` 工厂方法**：你可以直接创建一个 `source` 对象，它包含一个 `token` 属性，这个 `token` 将被用作取消请求的标识。 ```javascript var CancelToken = axios.CancelToken; var ...
详解vue axios中文文档
08-29
Vue Axios 中文文档详解 Axios 是一个基于 Promise 的 HTTP 客户端，支持浏览器和 Node.js 环境。它是 Vue 官方推荐的前后端通信插件，提供了简洁的 API 和强大的功能。 Axios 的特点包括： 1. 基于 Promise 的...
详解vue axios二次封装
10-18
Vue Axios 二次封装是将官方提供的 Axios 库根据项目的实际需求进行定制化处理，以提高开发效率和代码的可维护性。在这个过程中，通常会包括设置公共参数、拦截器、错误处理等方面的工作。 首先，引入 Axios 和 QS ...
vue axios用法教程详解
08-29
Vue Axios用法教程详解 Vue Axios是Vue.js生态系统中的一款流行的HTTP客户端库，由Matt Zabriskie创建，用于替代Vue.js中的Vue Resource插件。下面我们将对Vue Axios的用法进行详细的介绍。 Axios的安装和引入 ...
前端面试——UDP、TCP、HTTP、DNS详解
警警的博客
08-12 1061
UDP、TCP、HTTP、DNS详解
http 请求-04-promise 对象 + async/await 入门介绍
08-18 649
这是一个静态方法，接受一组 Promise 对象作为输入，并返回一个新的 Promise 对象。这个新的 Promise 在所有输入的 Promise 都成功完成时才会成功，如果任何一个输入的 Promise 失败，则立即失败。它返回一个新的 Promise，这个 Promise 将在输入的 Promise 中任何一个首先解决或拒绝时解决或拒绝。总的来说，Promise 提供了一种更加强大、灵活和可读性更强的方式来处理 JavaScript 中的异步操作，极大地改善了开发体验。
网站配置了https证书，但浏览器访问时却访问了http
最新发布
奇点的博客
08-18 335
是由于缺少强制将 HTTP 请求重定向到 HTTPS 的规则。
深入解析JavaScript的XMLHttpRequest对象：异步Web通信的基石
2402_85761468的博客
08-16 771
是一个JavaScript内置对象，用于在客户端与服务器之间进行数据交换。它支持异步请求，这意味着在等待服务器响应期间，用户可以继续与页面交互。
二次封装axios,详解，附带demo
07-12
当我们对axios进行二次封装时，可以按照以下步骤进行： 1. 安装axios：首先，我们需要安装axios库。可以使用npm或者yarn命令进行安装。 ```bash npm install axios ``` 2. 创建封装文件：接下来，在项目中创建一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值