axios发送请求

最新推荐文章于 2024-03-11 19:17:37 发布

userZgh

最新推荐文章于 2024-03-11 19:17:37 发布

阅读量1.5k

点赞数 3

文章标签：前端 json javascript

本文链接：https://blog.csdn.net/zgh472365411/article/details/126735017

版权

axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。

支持的功能：

从浏览器发出 XMLHttpRequests请求。
从 node.js 发出 http 请求。
支持 Promise API。
能拦截请求和响应。
能转换请求和响应数据。
取消请求。
实现JSON数据的自动转换。
客户端支持防止 XSRF攻击。

使用方式一

  axios({
        method:"GET",
        url:"http://localhost:3000/posts/1"
       }).then(response=>{
           console.log(response);
       })

使用方式二

axios.get("http://localhost:3000/posts/1")
       .then(response=>{
           console.log(response);
       })

配置对象常用的配置项

{
  // 路径url
  url: '/user',

  // 请求方法，默认get
  method: 'get', 

  //基础url，最终请求的url是 baseURL+url拼接，所以再全局设置默认，可以使得发送请求时的url变得简洁
  baseURL: 'https://some-domain.com/api/',

  //设置请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //设置请求url的query参数，可以使得url简洁。
  //比如url是https://some-domain.com/api/user  然后params如下设置，那么最终的url是：
  //https://some-domain.com/api/user?ID=12345&name=Jack
  params: {
    ID: 12345,
    name:"Jack"
  },


 //设置请求体
  data: {
    firstName: 'Fred'
  },
  
  //设置请求的另外一种格式，不过这个是直接设置字符串的
  data: 'Country=Brasil&City=Belo Horizonte',

 //请求超时，单位毫秒，默认0，不超时。
  timeout: 1000,

  //响应数据类型，默认json
  responseType: 'json', 

  //响应数据的编码规则，默认utf-8
  responseEncoding: 'utf8',


	//响应体的最大长度 
  maxContentLength: 2000,

  // 请求体的最大长度
  maxBodyLength: 2000,

  //设置响应状态码为多少时是成功，调用resolve，否则调用reject失败
  //默认是大于等于200，小于300
  validateStatus: function (status) {
    return status >= 200 && status < 300; 
  },

默认配置

{
  // 路径url
  url: '/user',

  // 请求方法，默认get
  method: 'get', 

  //基础url，最终请求的url是 baseURL+url拼接，所以再全局设置默认，可以使得发送请求时的url变得简洁
  baseURL: 'https://some-domain.com/api/',

  //设置请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  //设置请求url的query参数，可以使得url简洁。
  //比如url是https://some-domain.com/api/user  然后params如下设置，那么最终的url是：
  //https://some-domain.com/api/user?ID=12345&name=Jack
  params: {
    ID: 12345,
    name:"Jack"
  },


 //设置请求体
  data: {
    firstName: 'Fred'
  },
  
  //设置请求的另外一种格式，不过这个是直接设置字符串的
  data: 'Country=Brasil&City=Belo Horizonte',

 //请求超时，单位毫秒，默认0，不超时。
  timeout: 1000,

  //响应数据类型，默认json
  responseType: 'json', 

  //响应数据的编码规则，默认utf-8
  responseEncoding: 'utf8',


	//响应体的最大长度 
  maxContentLength: 2000,

  // 请求体的最大长度
  maxBodyLength: 2000,

  //设置响应状态码为多少时是成功，调用resolve，否则调用reject失败
  //默认是大于等于200，小于300
  validateStatus: function (status) {
    return status >= 200 && status < 300; 
  },

axios拦截器

实质就是函数。
分为两种类型：

请求拦截器：用于拦截请求，自定义做一个逻辑后再把请求发送，可以用于配置公用的逻辑，就不用每个请求都配一遍。
响应拦截器：用于拦截响应，做一些处理后再出发响应回调。

可以在请求拦截器中对config进行调整，比如添加一个超时什么的，可以在响应拦截器中对response返回值进行调整，比如我返回到回调函数中只想要响应体部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios拦截器</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //这个是设置请求拦截器的api，传入两个回调，第一个成功回调，第二个失败回调。
        axios.interceptors.request.use(
            function(config){
                console.log("请求拦截器1调用成功");
                return config;
            },
            function(error){
                console.log("请求拦截器1调用失败");
                return Promise.reject(error)
            }
        )

        axios.interceptors.request.use(
            function(config){
                //设置请求超时时间
                config.timeout = 5000;
                console.log("请求拦截器2调用成功");
                return config;
            },
            function(error){
                console.log("请求拦截器2调用失败");
                return Promise.reject(error)
            }
        )

        //这个是设置响应拦截器的api，第一个成功回调，第二个失败回调
        axios.interceptors.response.use(
            function(response){
                console.log("响应拦截器1调用成功");
                 console.log(response);
                //返回到请求回调时，只要data数据
                return response.data;
            },
            function(error){
                console.log("响应拦截器1调用失败");
                return Promise.reject(error);
            }
        )
        axios.interceptors.response.use(
            function(response){
                console.log("响应拦截器2调用成功");
                return response;
            },
            function(error){
                console.log("响应拦截器2调用失败");
                return Promise.reject(error);
            }
        )

        axios.get("http://localhost:3000/posts/1")
        .then(function(response){
            //
            console.log("请求回调成功");
            console.log(response);
        }).catch(function(error){
            console.log("请求回调失败");
        })
    </script>
</body>
</html>

取消请求

取消请求就是发送了请求后，等待一段时间得不到回应，可以取消他。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios取消请求</title>
</head>
<body>
    <button id="btn1">发送请求</button>
    <button id="btn2">取消请求</button>



    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        //第一步：定义一个全局的cancel变量，初始值是null
        let cancel = null;
        document.getElementById("btn1").onclick = function(){
            axios.get("http://localhost:3000/posts/1",
            {
                //第二步：在请求的配置对象中，配置cancelToken属性值，并把函数的c参数赋值给全局变量cancel
                cancelToken:new axios.CancelToken(function(c){
                    cancel = c;
                })
            })
        .then(function(response){
            //
            console.log(response);
        }).catch(function(error){
            console.log("请求回调失败");
        })
        }

        document.getElementById("btn2").onclick = function(){
            //第三步：调用cancel函数就是取消请求接收
            cancel();
        }
    </script>
</body>
</html>