typeScript|vue中的axios的请求（一） javascript|前端|typescript|vue.js

axios的使用

- axios的基本使用
- - 安装axios：
  - 1.模拟get请求
  - 2.get请求,并且传入参数
  - 3.post请求
  - 4.axios的配置选项
  - - 4.1. 全局的配置
    - 4.2. 每一个请求单独的配置
  - 5.axios.all - 多个请求, 一起返回
  - 6.axios的拦截器 - interceptors
- 区分不同的环境
- - 方式一: 手动的切换不同的环境(不推荐)
  - 方式二：根据process.env.NODE_ENV区分
  - 方式三：编写不同的环境变量配置文件

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((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 = 10000if (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是未区分环境，都可使用；其余的三个对应的是不同的环境下的文件；