Vue全家桶系列之Axios(一)

最新推荐文章于 2024-06-25 15:12:01 发布
最新推荐文章于 2024-06-25 15:12:01 发布
阅读量5.8k 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ws9029/article/details/121003115
版权

文章目录

1.前言

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中,之所以前端流行是因为它可以用在浏览器和 node.js 中，axios在浏览器端使用XMLHttpRequest对象发送ajax请求，在node环境使用http对象发送ajax请求，并且符合现在前端MVVM的开发模式，react/vue 官方都推荐使用 它，可以说是前端必备的知识了！

2.项目引入

1. 项目中安装

npm install axios vue-axios --save -dev

2. 项目中引入

import Axios from "axios"
import VueAxios from "vue-axios"
Vue.use(VueAxios,Axios);

3. 项目中使用this.$http发送请求

 created() {
     this.$http.get("xxxx/xxxx").then((response) => {
      // ...
     },(error)=>{
     //  ....
     });
 },

3.语法

1.可以通过向 axios 传递相关配置来创建请求!

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'zhang',
    lastName: 'san'
  }
});

配置很多,我列下比较常用的，比较基础的会写上注释，有些不好理解的我会举例说明
1. url: url 是用于请求的服务器 URL。
2.method: method是创建请求时使用的方法。
3. baseURL:baseURL 将自动加在 url前面，除非url是一个绝对 URL。
4. params：params是即将与请求一起发送的 URL 参数（拼接到url后面）。

this.$http({
   url: "/post/test",
   baseURL:
     "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena",
   method: "post",
   params:{
     a:1,
     b:2
   	}
   }).then(function (response) {
     console.log(response);
   }).catch(function (error) {
     console.log(error);
   });

在这里插入图片描述

5. data：作为请求主体被发送的数据，只适用于这些请求方法 PUT, POST, 和 PATCH。

this.$http({
   url: "/post/test",
   baseURL:
     "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena",
   method: "post",
   data:{
     x: 1,
     y: 2
   	}
   }).then(function (response) {
     console.log(response);
   }).catch(function (error) {
     console.log(error);
   });

在这里插入图片描述

6. transformRequest：允许在向服务器发送前，修改请求数据， 只能用在 PUT, POST 和 PATCH 这几个请求方法，后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream。下面演示下把请求主体被发送的数据变成 URL 参数的格式

this.$http({
   url: "/post/test",
   baseURL:
     "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena",
   method: "post",
   transformRequest: [
      function (data, headers) {
        // qs库编码数据
        const qs = require('qs');
        return  qs.stringify(data);
      }
    ],
   data:{
     x: 1,
     y: 2
   	}
   }).then(function (response) {
     console.log(response);
   }).catch(function (error) {
     console.log(error);
   });

在这里插入图片描述

7. transformResponse：在传递给 then/catch 前，允许修改响应数据。

this.$http({
   url: "/post/test",
   baseURL:
     "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena",
   method: "post",
   transformResponse: [
   function (data, headers) {
     	// 默认是string类型，转成对象并添加name属性
	     data = JSON.parse(data);
	     data.name="zhangsan";
	     console.log(data);
	     return data;
  		 }
  	]
  }).then(function (response) {
     console.log(response);
   }).catch(function (error) {
     console.log(error);
   });

在这里插入图片描述

8. responseType: 表示服务器响应的数据类型，默认是json,具体类型可以是 arraybuffer, blob, document, json, text, stream。 不过text有个bug(我觉得是bug,应该返回后的是string类型，但是还是json对象)。

//axios 请求
    this.$http({
      url: "/post/test",
      baseURL:
        "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena",
      method: "post",
      responseType: "text",
    })
      .then(function (response) {
        console.log(response.data, "axios返回类型：" + typeof response.data);
      })
      .catch(function (error) {
        console.log(error);
      });

    //原生xhr请求
    let xhr = new XMLHttpRequest();
    xhr.open(
      "post",
      "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena/post/test",
      true
    );
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.responseType = "text";
    xhr.onload = function () {
      console.log(
        this.response,
        "原生js返回类型：" + typeof this.response
      );
    };
    xhr.send();

    //jquery ajax请求
    ajax.post({
      url: "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena/post/test",
      method: "post",
      dataType: "text",
      success: function (data) {
        console.log(data, "原生ajax返回类型：" + typeof data);
      },
    });
  }

在这里插入图片描述
原生的js和jquery的ajax请求都是正常返回string类型，但是只是axios返回的还是json,我想是个bug吧，如果想要字符串，我要你可能还需要自己手动转下！

9. headers: 是即将被发送的自定义请求头,比如需要验证的token。

10. paramsSerializer：是一个负责 params序列化的函数。如果是对象，可能你不需要序列化，会自动转成（key1=value1&key2=value2）的形式，但是如果是数组，将一个数组作为一个请求参数传递，要么axios直接抛出连接异常，要么后端接口接收不到匹配的参数。所以这时候你需要用上这个序列化函数，可以引入一个序列化的库qs，这里有4种序列化形式！具体需要什么要看需求！

//形式1： 
qs.stringify({ids: [1, 2, 3]}, { indices: false })
//ids=1&ids=2&id=3


//形式2：
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘indices‘})
// ids[0]=1&aids1]=2&ids[2]=3


//形式3：
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘brackets‘})
//ids[]=1&ids[]=2&ids[]=3
 
//形式4：
qs.stringify({ids: [1, 2, 3]}, {arrayFormat: ‘repeat‘}) 
// ids=1&ids=2&id=3


 this.$http({
   url: "/post/test",
   baseURL:
     "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena",
   method: "post",
   params:{
      a:[1,2,3]
   },
   paramsSerializer:params=> {
     return qs.stringify(params, { arrayFormat: "repeat" });
   }
 }).then(function (response) {
     console.log(response);
   }).catch(function (error) {
     console.log(error);
   });

在这里插入图片描述

11. timeout: 指定请求超时的毫秒数,如果请求时间超过设置的时间，请求将被中断。好比一个请求比如正常需要2000毫秒，但是你设置timeout时间为1000毫秒，那么怎么请求都会是失败的！这里为了演示，我设置5毫秒。


 this.$http({
   url: "/post/test",
   baseURL:
     "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena",
   method: "post",
   timeout:5
 }).then(function (response) {
     console.log(response);
   }).catch(function (error) {
   	//Error: timeout of 5ms exceeded
     console.log(error);
   });

在这里插入图片描述

12. validateStatus：定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 validateStatus返回 true，promise 将被 resolve; 返回false，promise 将被 rejecte，换句话说就是可以自己定义状态码!


 this.$http({
   url: "/post/test",
   baseURL:
     "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena",
   method: "post",
     validateStatus: function (status) {
        return status >= 200 && status < 300  // default
      },
 }).then(function (response) {
     console.log(response);
   }).catch(function (error) {
   	//Error: timeout of 5ms exceeded
     console.log(error);
   });

2.为方便起见，为所有支持的请求方法提供了别名,可以通过别名来创建请求！

1. axios.get(url[, config])
2. axios.delete(url[, config])
3. axios.head(url[, config])
4. axios.options(url[, config])
5. axios.post(url[, data[, config]])
6. axios.put(url[, data[, config]])
7. axios.patch(url[, data[, config]])

config的常用配置上面都已经说过了，可能有很多人看不懂[ ，]的意思，顺便说下吧！[ ]代表是可选参数，[ ]里面的逗号是参数的分割，就拿axios.get(url[, config])来说吧，config是可选参数，如果有config参数就是axios.get(url, config)，如果没有config参数就是axios.get(url)！

4.并发请求

4.1 axios.all
let getPromise = this.$http.get(
    "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena/get/test"
  ),
  postPromise = this.$http.post(
    "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena/post/test"
  );

this.$http.all([getPromise, postPromise]).then((response) => {
  console.log(response);
});

在这里插入图片描述
返回的是一个数组，那么要拿到结果就需要循环它了，并且返回的结果顺序也不一定是你前面写的参数的顺序（谁先执行完，哪个就在第一个位置），那么axios.spread正好就可以解决这个问题！

4.2 axios.spread
let getPromise = this.$http.get(
    "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena/get/test"
  ),
  postPromise = this.$http.post(
    "https://www.fastmock.site/mock/257d9fdebd0b1dd887acd6ec80db8ade/cena/post/test"
  );
  
  this.$http.all([getPromise, postPromise]).then(this.$http.spread((getPromise,postPromise) => {
  	console.log(getPromise,postPromise);
}));

在这里插入图片描述
返回的是多个对象，并且spread回调参数和前面all写的参数的是一一对应的！

世态炎凉！！
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vueaxios将axios整合到VueJS的封装
08-08
vue-axios：将axios整合到VueJS的封装
Vue.js 2.0之全家桶系列视频课程
06-30
多面讲解Vue.js全家桶（vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等） 课程内容包含：1. 数据绑定、模板、指令、过滤器、vue生命周期及实例的属性和方法 2. 组件及组件间的通信、发送HTTP...
【小项目】Vue 整合 Axios
313YPHU3的博客
08-27 344
【小项目】Vue 整合 Axios
VUE的axios的详细介绍和用法
最新发布
zayyo的博客
06-25 919
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.原因是我们的项目部署在domain1.com服务器上时, 是不能直接访问domain2.com服务器上的资料的，会产生跨域问题。标签的src帮助我们去服务器请求到数据, 将数据当做一个javascript的函数来执行, 并且执行的过程中传入我们需要的json。jQuery的代码要1w+行，而Vue的代码才1w+行.引用用这个框架反而使得我们的项目更加臃肿。响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。
vue整合的axios(Bug)
Do Re Mi 的博客
10-24 1277
vue整合的axios(Bug) 在项目中需要用到后台的数据对前端渲染，使用到了vue整合的axios，使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请求然后将返回后的数据赋值data（）中定义的属性： 执行后页面报错： 原因分析： 在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。也就是说方法中的 this 指...
vue axios整合
柳絮飞祭奠（java交流分享群：522818473）
02-28 1414
第一步： 安装 cnpm install axios 第二步：新建一个http.js http.js内容： import Axios from 'axios' // 设置后端api路径 Axios.defaults.baseURL = 'http://127.0.0.1:8082' // Axios.defaults.headers['Access-Control...
VUE项目整合Axios
chuanhai888的博客
11-16 220
vue项目使用组件前先引入依赖（注意：axios对node版本有要求，如果最新版本axios报错，可以降低axios版本）import { post } from ‘@/api/http’ //在文件中引入http.js文件。post(‘/****/***后台方法路径’, 请求参数).then(response => {})新增一个js文件来封装axios，在vue项目新增文件夹utils，js文件request.js。再新增http.js文件，用于封装get、post请求。
myVue2.X:vue全家桶（vue、router、axios、vuex）
05-19
vue_test 一个Vue.js项目构建设置 # install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build 有关工作原理的详细说明，请...
尚硅谷_Vue全家桶_基于VUE_vue；尚硅谷_vue_
10-04
"Vue全家桶"通常指的是使用Vue.js进行开发时，包括一系列配套工具和技术的完整解决方案。这些工具包括： 1. **Vuex**：Vuex是Vue的状态管理库，用于集中管理应用的状态，遵循 Flux 架构模式，使状态管理变得...
vue-elmm:vue全家桶+axios商城系统
05-18
vue-elmm此项目是重构饿了么45个单页应用注：此项目属于重构，其中还有许多做的不足之处，会继续做代码优化，如果大家有更好的建议或者问题可以加入我的交流群里交流：QQ群：157028081技术栈vue2 + vuex + vue-...
Vue全家桶仿WY优选APP商城源码
07-09
Vue全家桶仿WY优选APP商城源码，采用Vue全家桶+mintUI+axios技术栈开发，只写了前端，后端采用WY商场抓包接口，也可以二次修改成自己的接口。 实现了挺多的功能的，比如首页、商品列表、商品分类、下单、购物车、...
vue-axios整合使用
zcy_csdn123的博客
10-18 240
http://blog.csdn.net/hant1991/article/details/74931158
Vue总结（二）—— 整合axios
qq_43776195的博客
03-06 3254
文章目录Vue总结（二）—— 整合axios1、axios1.1 axios 简介1.2 axios基本使用1.3 axios拦截器（interceptor）1.3.1 封装axios2、代理配置（解决跨域）2.1 方法一2.2 方法二2.3 示例代码3、vue整合axios3.1 创建vue-cli 项目3.2 封装axios3.3 main.js 引入，添加到vue原型对象3.4 代理配置（解决跨域问题）3.5 使用 Vue总结（二）—— 整合axios 本文参考： vue项目中axios模块封装和ax
在vue中使用axios
pingting_的博客
02-25 528
在vue中使用axios1. 基本用法演示2. 把 axios 挂载到 Vue 原型上并配置请求根路径2.1 挂载2.2 配置请求根路径2.3 缺点2.4 main.js 源码 1. 基本用法演示 get 请求 <button @click="getInfo">发起 GET 请求</button> methods: { async getInfo () { const { data: res } = await axios.get('http://www
vue项目中配置axios
weixin_45975254的博客
11-23 396
vue项目中配置axios 第一种 //生产环境判断 线下测试域名 线上服务器域名 const BASEAPI = process.env.NODE_ENV === ‘development’ ? ‘网址’ : ‘网址’ // 创建axios实例 const request = axios.create({ baseURL: BASEAPI, //请求接口域名 timeout: 60000, // 请求超时设置 withCredentials: false, //是否让axios请求携带 cookies 如
vue安装使用axios（包括axios上传文件）
qq_17627195的博客
10-28 415
引入axios（可以在需要的地方引入，不用全局引入）如果需要上传文件，记得修改。
axios和vue的整合操作，还不来看看
程序小白的博客
04-03 2447
axios和vue的整合操作，还不来看看
axios 拦截器 （axios二次封装）
yang295242361的博客
09-14 523
拦截器 在请求或响应被then或catch处理前拦截它们。 import axios from 'axios' const myrequest = axios.create({ //实例化axios baseURL: 'https://api.example.com' timeout = 2500;// 现在，在超时前，所有请求都会等待 2.5 秒 headers:{}//可设置请求头 }) // 添加请求拦截器 myrequest .interceptors.req...
深入了解 Axios 的 put 请求：使用技巧与最佳实践
09-08 4543
Axios 是一个功能强大的 JavaScript HTTP 客户端库，可以方便地进行 PUT 请求，用于更新服务器上的资源状态。我们可以通过拼接 URL、使用params参数或将数据作为请求体传递，来实现不同的传参方式。在实践中，需要根据后端 API 的要求来选择合适的传参方式，并根据返回的状态码进行相应的处理。Axios 的 post 请求如何使用？传参写法有哪几种？Axios 的 interceptors（拦截器）如何使用？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值