在Vue的项目当中,引入Jquery库,然后进行Ajax请求无疑的浪费成本与性能的,所以还有什么更好的方式吗??? 答案当然是Yes.今天就让我带着大家一起了解一下Axios吧!!!

一、Restful风格接口

Restful风格的API是一种软件架构风格，设计风格而不是标准，只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

在Restful风格中，用户请求的url使用同一个url而用请求方式：get，post，delete，put…等方式对请求的处理方法进行区分，这样可以在前后台分离式的开发中使得前端开发人员不会对请求的资源地址产生混淆和大量的检查方法名的麻烦，形成一个统一的接口。

二、Axios与QS

在Vue和React等大型项目中，我们常用的数据请求方式，就是Axios。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

官网地址：http://www.axios-js.com/

3.1、安装

npm i axios qs -S

3.2、使用

axios统一使用格式

axios.get(url[, config])
axios.post(url[, data[, config]])

// 直白一点表示：

axios
  .get(url, {
    params: {}
  })
  .then(res=>{})
  .catch(err=>{})

axios
  .post('/user', {})
  .then(res=>{})
  .catch(err=>{})

qs使用

qs能将json格式转为 key=value 的格式。

具体用法：

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

qs.stringify与JSON.stringify的区别

qs.stringify()将对象 序列化成URL的形式，以&进行拼接。JSON.stringify()是正常类型的JSON.

• JSON转化后的格式为key: value
• QS转化后的格式为key=value

var a = {name:'Lucy',age:10};
qs.stringify(a)
// 'name=Lucy&age=10'
JSON.stringify(a)
// '{"name":"Lucy","age":10}'

实际操作：

1、开启后端服务

打开 backend 目录，执行 npm i 命令，安装依赖成功后再执行 node server.js，到浏览器输入 http://localhost:8000 查看接口文档。

2、组件中发起请求：

发送get请求：

// get请求
axios.get("http://localhost:8000/getdata").then(res => {
  console.log(res);
});

// 上面的请求也可以这样做【以后我们都选用这种模式，方便后期做配置】
let qsObj = qs.stringify({
  num: 123
});
axios
  .post("http://localhost:8000/postdata", {
    data: qsObj
  })
  .then(res => {
    console.log(res);
  });

3、解决跨域

到此，发现跨域，解决方案是找到 vue.config.js :

module.exports = {
    devServer: {
        proxy: "http://localhost:8000"
    }
}

然后请求改写：

// get请求
axios.get("/getdata").then(res => {
  console.log(res);
});

// 上面的请求也可以这样做【以后我们都选用这种模式，方便后期做配置】
let qsObj = qs.stringify({
  num: 123
});
axios
  .post("/postdata", {
    data: qsObj
  })
  .then(res => {
    console.log(res);
  });

三、环境变量

我们实际开发中，往往有多种环境，如：

• development 模式用于 vue-cli-service serve
• production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
• test 模式用于 vue-cli-service test:unit

甚至还有其他的，这里我们只讨论 development和production。

此处有几个要注意的点：

1. 一个模式可以包含多个环境变量
2. 每个模式都会将环境变量中 NODE_ENV 的值设置为模式的名称
3. 可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量
4. 为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入，优先级高于.env和.env.local
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略，优先级高于.env和.env.local

一般环境变量文件都创建在根目录下，我们创建以下两份：

.env.dev 文件：

NODE_ENV=development
VUE_APP_BASE_URL=/

.env.prod 文件：

NODE_ENV = production
VUE_APP_BASE_URL = 'http://www.baidu.com'

注意：

• NODE_ENV - 是 “development”、“production” 、"test"或者自定义的值。具体的值取决于应用运行的模式
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径
• 除了 NODE_ENV 和 BASE_URL，其他的环境变量必须以 VUE_APP_ 开头
• 项目中使用：process.env.环境变量名，eg：VUE_APP_BASE_URL

我们到任意一个组件中：

console.log(process.env.NODE_ENV);				// development
console.log(process.env.VUE_APP_BASE_URL)	// /

通过在 package.json 中的 scripts 下，使用mode，我们可以切换环境：

{
  "scripts": {
    "serve": "vue-cli-service serve --open --port 3000 --mode prod",
    "build": "vue-cli-service build --modern"
  },
}

再到任意一个组件中：

console.log(process.env.NODE_ENV);				
console.log(process.env.VUE_APP_BASE_URL)