axios入门

已于 2023-03-24 10:34:44 修改
阅读量284 收藏 1
点赞数
文章标签： vue.js javascript 前端 ajax
于 2022-07-26 15:51:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zlting_/article/details/125996480
版权
一、axios请求方式

axios安装教程：

​ https://www.npmjs.com/package/vue-axios

第一种：params，不安全

    //.then是响应成功的结果，.catch是请求失败的结果
    
    login(){
            //psot有参请求
            this.axios.post('/api/cunluo/userinfo/unintercept/userinfoLogin',
            {
                params: {
                    uEmail: "test1",                    
                    uPassword: "123456"
                }
            }).then(res => {
                console.log(res);
            }).catch(err => {
                console.log(err)
            })
        }

第二种：

//url后“name=张三”
//推荐这种post请求发送参数
this.axios
        .post("/api/cunluo/userinfo/unintercept/userinfoLogin",
          "uEmail:test1&uPassword:123456"
        )
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });

第三种：data

this.axios
        .post("/api/cunluo/userinfo/unintercept/userinfoLogin", {
          data: {
            sId: 108,
            password: "123456",
          },
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });

第四种：url后面{ }，需要后端配合

在这里插入图片描述

//后台服务器端给接收的参数加上@requestBody，然后在请求中更改
      this.axios
        .post("/api/cunluo/userinfo/unintercept/userinfoLogin", {
          uEmail: "test1",
          uPassword: "123456",
        })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
二、vue中axios解决跨域设置代理问题

1.在vue中config文件下的index.js文件中配置代理

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{  //匹配所有以 'api'开头的请求路径
        target:'http://111.231.227.66/',  //代理目标的基础路径
        changeOrigin:true,  //支持跨域
        secure:false,
        pathRewrite:{ //重写路径：去掉路径中的开头的'/api'
          '^/api':''
        }
      }
    },

2.在axios请求路径中更改

login(){
            this.axios.post('/api/cunluo/userinfo/unintercept/userinfoLogin',
            {
                params: {
                    uEmail: "test1",                    
                    uPassword: "123456"
                }
            }).then(res => {
                console.log(res);
            }).catch(err => {
                console.log(err)
            })
        }
三、axios并发请求

axios.spread实现并发，处理响应数据结果

   this.axios
        .all([
          this.axios.post("/api/cunluo/userinfo/unintercept/userinfoLogin", {
            uEmail: "test1",
            uPassword: "123456",
          }),
          this.axios.post("/api/cunluo/userinfo/unintercept/userinfoLogin"),
          this.axios.post("/api/cunluo/userinfo/unintercept/userinfoLogin")
        ])
        .then(
          //axios.spread几个参数就有几个返回请求值(处理响应数据结果)
          this.axios.spread((one, two,three) => {
            console.log(one), console.log(two),console.log(three);
          })
        )
        .catch((err) => {
          console.log(err);
        });
四、axios全局配置属性

在这里插入图片描述

        //api已经在配置代理那写了，所以post请求中可以不写/api
        //和配置代理配合使用
       this.axios.defaults.baseURL='/api';  
       this.axios.defaults.timeout=5000;    //延迟多少毫秒没有反应就报错超时
       this.axios.post('/cunluo/userinfo/unintercept/userinfoLogin').then(res=>{
           console.log(res)
       })
五、axios的实例
      let newvar=this.axios.create({
          baseURL:'/api',
          timeout:5000
      })
	  //实例中也可以添加method属性
      let newvar2=this.axios.create({
          baseURL:'/api/cunluo',
          timeout:5000
      })
      //全局是全部axios都可以使用，实例是用这个实例时，才能用实例中的属性

      newvar({
          method:'post',
          url:'/cunluo/userinfo/unintercept/userinfoLogin'
      }).then(res=>{
          console.log(res);
      })
      //这就是实例的封装

    newvar2({
          method:'post',
          url:'/userinfo/unintercept/userinfoLogin'
      }).then(res=>{
          console.log(res);
      })
六、axios拦截器
      //axios给我们提供了两大类拦截器
      // 一种是请求方向的拦截(成功请求，失败的) 另一种是响应方向的(成功的，失败的)
      //拦截器的作用 用于我们在网络请求的时候在发送请求或者响应是对操作进行响应的处理
      //具体用于 发送请求时可以添加网页加载的动画 强制登录
      //响应的时候可以进行相应的数据处理

1.常规请求方式

      this.axios
        .post("/api/cunluo/userinfo/unintercept/userinfoLogin")
        .then((res) => {
          console.log(res);
          console.log("post响应回来的数据");
        });

请求方向的拦截（第一个是拦截，第二个是错误回调)

      this.axios.interceptors.request.use(
        (config) => {
          console.log("进入请求拦截器");
          console.log(config);
          //拦截之后会停下来，要继续放下走，让他返回，需要return
          return config;
        },
        (err) => {
          // 失败返回错误
          //错误回调
          return Promise.reject(error);
        }
      );
      //拦截器的错误返回不能用catch！！！

响应方向的拦截（第一个是拦截，第二个是错误回调)

      this.axios.interceptors.response.use(
        (config) => {
          console.log("响应拦截器");
          console.log(config);
          //拦截之后会停下来，要继续放下走，让他返回，需要return
          return config;
        },
        (err) => {
          // 失败返回错误
          //错误回调
          console.log("响应方向失败");
          return Promise.reject(error);
        }
      );

2.使用axios实例与拦截器结合

先实例：

	  // //实例对象与拦截器配合使用
      // //实例对象.interceptors.request.use() 请求拦截器
      //先实例->拦截器->发送axios请求

      let newvar2 = this.axios.create({
        baseURL: "/api/cunluo",
        timeout: 5000,
      });

拦截器：

请求方向的拦截：

newvar2.interceptors.request.use(
        (config) => {
          console.log("进入请求拦截器");
          console.log(config);
          //拦截之后会停下来，要继续放下走，让他返回，需要return
          return config;
        },
        (err) => {
          // 失败返回错误
          //错误回调
          return Promise.reject(err);
        }
      );

响应方向的拦截:

    newvar2.interceptors.response.use(
        (config) => {
            console.log("进入响应拦截器");
            console.log(config);
            //拦截之后会停下来，要继续放下走，让他返回，需要return
            return config;
        },
        (err) => {
            // 失败返回错误
            //错误回调
            return Promise.reject(err);
        }
    );

发送axios请求：

      // axios实例来请求;

      //实例对象
      newvar2({
        method: "post",
        url: "/userinfo/unintercept/userinfoLogin",
      }).then((res) => {
        console.log(res);
      });
七、axios在vue中的模块封装

第一种：用变量传递

新建一个js文件

//封装位置
import axios from "axios";
export function request(config, success, fail) {
    // axios({
    //     url: config,
    //     method: 'post'
    // }).then(res => {
    //     success(res);
    // }).catch(err => {
    //     fail(err)
    // })
}

//调用者位置（vue中，在main.js文件中调用）

import {request} from './network/request/request'

request('/userinfo/unintercept/userinfoLogin',res=>{
  console.log(res)
},err=>{
  console.log(err)
})

第二种：用对象参数

//封装位置
import axios from "axios";

//第二种封装方法，用对象传递
export function request(config) {
    axios({ url: config.url, method: 'post' }).then(res => {
        config.success(res);
    }).catch(err => {
        config.fail(err)
    })
}

//调用者位置（vue中，在main.js文件中调用）
//第二种调用方式，用对象传递
import {request} from './network/request/request'

request({
  url: '/api/cunluo/userinfo/unintercept/userinfoLogin',
   success: res => {
    console.log(res)
  }, fail: err => {
    console.log(err)
  }
})

第三种：对象传递，用Promise封装axios实例

//第三种封装方法
export function request(config) {
    let newVar = axios.create({
        baseURL: "/api/cunluo/userinfo/unintercept",
        timeout: 5000,
        method: 'post'
    });
    //返回的是promise值
    return new Promise((resolve, reject) => {
        newVar(config.url)
    }).then(res => {
        console.log(res)
        resolve(res)
    })
    .catch(err => {
        console.log(err)
        reject(err)
    })
}
//注意回调then和catch的位置，紧跟promise后面


// 第三种调用方式

//成功发送了axios
request({
  // url: '/api/cunluo/userinfo/unintercept/userinfoLogin'
  url:'userinfoLogin'
}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err)
})

第四种：最推荐使用最后一种封装方法！用对象传参

//第四种封装方法

export function request(config) {
    // axios实例创建完后，返回的就是一个promise
    //axios本身就是一个promise
    let newVar = axios.create({
        baseURL: "/api/cunluo/userinfo/unintercept",
        timeout: 5000,
        method: 'post'
    });
    return newVar(config)
}


// 第四种调用方式
request({
  url:'userinfoLogin'
}).then(res=>{
  console.log(res)
})
zlting_
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Axios使用方法详解，从入门到进阶
青春木鱼的博客
08-16 3万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
Axios入门
程序员Sharry的博客
09-25 513
Axios的入门学习：基本概念、配置于基本使用。
axios入门基础
weixin_41325924的博客
03-11 1847
1.使用json-server的介绍与服务搭建 在线文档: https://github.com/typicode/json-server 下载: npm install -g json-server 目标根目录下创建数据库 json 文件: db.json { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" }, { "id": 2, "title": "json-server2", "author":
axios（快速入门）
m0_71349739的博客
02-03 399
axios是目前前端最流行的ajax请求库，react、vue官方都推荐使用axios访问ajax请求，本文对axios进行概述，讲解其特点和常用语法以及难点语法的理解和使用，最后对其部分源码进行分析。
axios快速入门
最新发布
qq_62377885的博客
04-06 1432
get：获取数据，请求指定的信息，返回实体对象post：向指定资源提交数据（例如表单提交或文件上传）put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新delete：请求服务器删除指定的数据。
axios入门axios入门axios入门
10-29
在本文中，我们将深入探讨 Axios 的基本用法，帮助你快速入门。 ### 1. 安装 Axios 在开始使用 Axios 之前，你需要先安装它。如果你使用的是 npm（Node Package Manager），可以在终端运行以下命令： ```bash npm...
axios入门示例代码（带文档教程）
11-07
下面将详细介绍 axios 的基本使用、特性以及如何与 Vue 结合进行实践。 ### Axios 基本使用 #### 安装 在项目中使用 Axios，首先需要通过 npm 或 yarn 进行安装： ```bash npm install axios # 或 yarn add axios ...
最新版axios入门教程——16.16-模拟实现axios发送请求(Av756328321,P16).rar
11-07
** Axios入门教程详解** 在现代Web开发中，前端与后端的数据交互是不可或缺的一部分，而axios作为一款流行的JavaScript库，提供了简单易用的API来处理HTTP请求。本教程将聚焦于"最新版axios入门教程——16.16-模拟...
最新版axios入门教程——12.12-axios文件结构说明(Av756328321,P12).rar
11-07
这个“最新版axios入门教程——12.12-axios文件结构说明(Av756328321,P12).rar”压缩包包含了对 Axios 的基础教程和其内部文件结构的解析，旨在帮助初学者更好地理解和使用 Axios。 1. Axios 基础概念： Axios 是...
最新版axios入门教程——15.15-axios发送请求过程详解(Av756328321,P15).rar
11-07
这篇最新的 Axios 入门教程深入讲解了 Axios 发送请求的过程，旨在帮助初学者快速掌握这一强大的工具。 首先，我们了解 Axios 的基本用法。在 JavaScript 中，你可以通过 `import` 或 `require` 来引入 Axios。例如...
Axios 请求配置参数详解
热门推荐
Wisdom—Yoga—TaciturnKnight（WYT）
06-23 9万+
axios API可以通过向 axios 传递相关配置来创建请求axios(config)// 发送 POST 请求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); axios(url[, config])// 发送...
vue发送ajax --axios入门介绍
string_user_get_set的博客
08-12 1044
vue是不支持发送ajax请求的，所以需要借助axios来完成这个工作。 axios下载地址：https://github.com/mzabriskie/axios 基本用法： axios([options]); axios.get(url，[options]);  //get方式传递参数是用过url传递 axios.post(url,data,[options]);  //po
vue axios全攻略
weixin_33918357的博客
03-23 4469
不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。本来想在网上找找详细攻略，突然发现，axios 的官方文档本身就非常详细！！有这个还要什么自行车！！所以推荐大家学习这种库，最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档，相信大家只要吃透本文再加以实践，axios 就是小意思啦！！ 如果您觉得本文对您有帮助，不妨点个赞或关注收...
3. axios
UnityAlvin
04-16 167
一、axios入门 1、axios的作用 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 官方网站：http://www.axios-js.com 2、axios应用案例 step1：mybatis-plus中添加后端接口 pom <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp
axios 使用入门
weixin_49928707的博客
10-25 2723
axios 使用入门 阅读目录 一、前言# 二、干货合集# 　　1、加载# 　　2、get & post# 　　3、拦截器# 三、总结# 一、前言 在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前，无法抛弃 Jquery 的重要理由，除了优秀的前端 DOM 元素操作性以外，能够非常便捷的发起 http 请求也占有非常重要的地位。 既然我们已经开始使用 Vue 进行前端开发，抛弃了对页面 DOM 元素的操作，难道，为了方便的发起 http 请求，还需要在项目中加载 j
Axios 入门教程
若尘的博客
03-03 1373
Axios 入门教程
axios 请求封装及多个请求loading管理
huangpb的博客
12-11 8229
官网
axios post
08-21
- *2* *3* [axios入门——常用五种请求方法介绍（get、post、put、patch、delete）](https://blog.csdn.net/m0_38010595/article/details/112793938)[target="_blank" data-report-click={"spm":"1018.2226.3001....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值