vue 中qs以及axios的安装与使用

2024-02-20 23:30:04

首先我们要先理解qs和axios到底帮我们干了什么：

简单来说，qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

具体的使用通常使用的有两种形式：

qs.parse()；作用是将URL解析成对象的形式。

let url = 'a=1&b=2&c=3';

Qs.parse(url);

//输出结果

{

  a:'1',

  b:'2',

  c:'3'

}

qs.stringify()；作用是将对象序列化成URL的形式，以&进行拼接（拼接是由底层处理，无需手动操作）

let obj= { a: "1", b: "2", c: "3"};

Qs.stringify(obj);


//结果

a=1&b=2&c=3;



qs.stringify({ a: ['b', 'c', 'd'] });

// 'a[0]=b&a[1]=c&a[2]=d'

重写默认情况

qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });

// 'a=b&a=c&a=d'

通过arrayFormat选项进行格式化输出

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })

// 'a[0]=b&a[1]=c'


qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })

// 'a[]=b&a[]=c'


qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })

// 'a=b&a=c'

JSON.string ify与 qs.stringify 的区别

json.stringify

      {"uid":"cs11","pwd":"000000als","username":"cs11"}

qs.stringify

      uid=cs11&pwd=abc&username=cs11

qs的安装与使用

在项目中使用命令行工具输入：npm install qs
安装完成后在需要用到的组件中：import qs from 'qs’
在main.js中全局引入： Vue.prototype.$qs = qs；

接下来我们在vue文件中就可以使用了。

例如：this.$qs.stringify（obj）；

this.$qs.parse(url);

axios的工作原理

axios为客户端提供了在客户端和服务器之间传输数据的功能（这源于其内部提供的一个API，即XMLHttpRequest ），同时支持浏览器端和服务端的请求。它还提供了一个全局变量，即process 对象，，通过它提供的有关信息，可以来控制当前 Node.js的进程。这样就可以实现通过XMLHttpRequest和process来判断程序的运行环境，从而在不同的环境提供不同的http请求模块，实现客户端和服务端程序的兼容。

我们在做ssr服务端渲染时，也可以使用这个方法来判断代码当前的执行环境。整个axios请求流程返回的是一个promise对象，这样可以让我们的异步请求天然的支持promise，方便我们对于异步的处理。且axios可以根据数据的不同决定header的不同。

axios默认使用application/json格式来提交数据的，但当我们使用axios请求数据传参时优肯会出现无法正常获取数据的情况，这个时候就会发现原因是传递参数要将参数序列化。这个时候我们就可以通过qs来进行实现，qs会帮我们通过application/x-www-form-urlencoded来进行提交数据（application/json提交(无需使用qs进行处理)）。

axios 的安装及使用

npm install axios --save

axios 使用

1. axios 的引入

// 在main.js文件中引入（在main.js引入即为全局引入）
import axios from 'axios'
import VueAxios from 'vue-axios'
// axios还可以使用prototype将axios挂载到原型上 ，$后面是自己起的名称，以后就可以使用该名称
//Vue.prototype.$axios = Axios;
Vue.use(VueAxios,axios);

2.在组件中直接使用

get传参

this.axios
        .get(
          this.$store.state.http +
            "test/pnList?token=" +
            this.getToken +
            "&pageSize=10&pageNum=" +
            this.pages +
            "&startTime=" +
            start +
            "&endTime=" +
            end
        )
        .then(res => {
           console.log(res);
        })
        .catch(err => {
          console.log(err);
        });

post提交

let postData = this.$qs.stringify({
        token: this.getToken,
        paymentsId: this.cancelId,
});
this.axios
          .post(this.$store.state.http + "test/cancel", postData)
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
           });

3.全局默认设置

在main.js文件中设置

// 全局默认设置,还可设置请求头headers等
Axios.defaults.baseURL = 'url'

码农公寓