vue中的axios的请求（一）

axios的基本使用

安装axios：

npm install axios

在项目中导入axios的使用，axios的实例对象

import axios from 'axios'; // axios的实例对象

1.模拟get请求

axios.get('http://localhost/:8000/index').then((res) => {
  console.log(res.data)
})

2.get请求,并且传入参数

axios.get('http://httpbin.org/get', {
    params: {
      name: 'wendy',
      age: 18
    }
  })
  .then((res) => {
    console.log(res.data)
  })

3.post请求

axios.post('http://httpbin.org/post', {
   data: {
     name: 'why',
     age: 18
    }
  })
  .then((res) => {
    console.log(res.data)
  });

额外补充的Promise中类型的使用, Promise本身是可以有类型

new Promise<string>((resolve) => {
  resolve('abc'); // 传入的参数就必须是string的类型
}).then((res) => {
  console.log(res.length)
});

4.axios的配置选项

4.1. 全局的配置

axios.defaults.baseURL = 'http://httpbin.org';
axios.defaults.timeout = 10000; // 超时时间
// axios.defaults.headers = {}

4.2. 每一个请求单独的配置

axios.get('/get', {
   params: {
     name: 'wendy',
    age: 18
   },
  timeout: 5000, // 单个请求配置的超时时间
   headers: {}
 })
 .then((res) => {
   console.log(res.data)
  });

5.axios.all - 多个请求, 一起返回

axios.all([
    axios.get('/get', { params: { name: 'why', age: 18 } }),
    axios.post('/post', { data: { name: 'why', age: 18 } })
  ])
  .then((res) => {
  	// 返回的res是个response的数组
    console.log(res[0].data)
    console.log(res[1].data)
  })

6.axios的拦截器 - interceptors

在请求或响应被 then 或 catch 处理前拦截它们;并在此做相对应的事件(例如：展示加载的loading的样式)

// 拦截axios中任意的请求
axios.interceptors.request.use(fn1, fn2); // 请求拦截
axios.interceptors.response.use(fn1, fn2); // 响应拦截
// fn1: 请求发送成功会执行的函数
// fn2: 请求发送失败会执行的函数

request的请求拦截

axios.interceptors.request.use(
  (config) => {
    // 想做的一些操作
    // 1.给请求添加token
    // 2.isLoading动画
    console.log('请求成功的拦截')
    return config
  },
  (err) => {
    console.log('请求发送错误')
    return err
  }
)

response的响应拦截

// fn1: 数据响应成功(服务器正常的返回了数据，状态码为200)
axios.interceptors.response.use(
  (res) => {
    console.log('响应成功的拦截')
    return res
  },
  (err) => {
    console.log('服务器响应失败')
    return err
  }
)

区分不同的环境

在开发中，有时候我们需要根据不同的环境设置不同的环境变量，常见的有三种环境：

• 开发环境：development；
• 生产环境：production；
• 测试环境：test；

那么如何区分环境变量呢？常见有三种方式：

• 方式一：手动修改不同的变量；
• 方式二：根据process.env.NODE_ENV的值进行区分；
• 方式三：编写不同的环境变量配置文件

方式一: 手动的切换不同的环境(不推荐)

通过在开发中手动的注解进行开发展示；

// dev 的开发环境
const BASE_URL = 'http://***.org/dev';
const BASE_NAME = 'coderwhy';
// prod 的生产环境
const BASE_URL = 'http://***.org/prod';
const BASE_NAME = 'kobe';
// test 的测试环境
const BASE_URL = 'http://***.org/test';
const BASE_NAME = 'james';

方式二：根据process.env.NODE_ENV区分

是通过webpack中的definePlugin插件注入不同环境的值，从而达到区分不同的环境

// 新建一个config.ts进行编辑，导入到axios实例中使用
// 开发环境: development
// 生成环境: production
// 测试环境: test
let BASE_URL = ''
const TIME_OUT = 10000

if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://localhost/:8000/'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://***.org/prod'
} else {
  BASE_URL = 'http://***.org/test'
}
export { BASE_URL, TIME_OUT }

方式三：编写不同的环境变量配置文件

vueCLI搭建的项目中，可使用创建不同的文件夹来配置文件，.env是未区分环境，都可使用；其余的三个对应的是不同的环境下的文件；

注入不同的变量使用；如下是.env.test文件；
这里的变量的名称不能随便取，一般都有BASE_URL，NODD_ENV;如果是自己随意写的WENDY是注入不成功；
希望得到自定义的名称，必须是VUE_APP_**的模式使用

VUE_APP_BASE_URL=https://****.org/test
VUE_APP_BASE_NAME=james

在项目中的使用，直接输出即可：

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