个人博客
0%

【Vue】Axios

发表于 分类于

Vue官方推荐使用的网络异步请求框架

一、axios框架基本使用

1.1 axios请求方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
axios(config)

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, config])

axios.put(url[, config])

axios.patch(url[, config])

1.2 axios框架安装

vue-cli项目运行npm install axios -save

1.3 基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
//在main.js中测试
...
//框架导入
import axios from "axios";

...
//请求方式一
axios({
  url: "http://123.207.32.32:8000/home/multidata", //此接口已经在后端解决跨域问题了，所以暂时不用思考跨域问题
  method: "get"
}).then(res => {
  console.log(res);
})
1
2
3
4
5
6
//请求方式二
axios.get("http://123.207.32.32:8000/home/multidata", {
  //配置内容
}).then(res => {
  console.log(res);
})
1
2
3
4
5
6
7
8
9
10
11
//请求带参数
axios({
  url: "http://123.207.32.32:8000/home/data",
  method: "get",
  params: {
    type: "sell",
    page: 1
  }
}).then(res => {
  console.log(res);
})

二、axios实现并发请求

之前在学Promise中了解多了并发请求的解决方法，axios也有属于自己的并发请求解决操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//发送并发请求，利用axios.all静态方法
axios.all([
  axios({ //请求1
    url: "http://123.207.32.32:8000/home/multidata"
  }),
  axios({ //请求2
    url: "http://123.207.32.32:8000/home/data",
    params: {
      type: "sell",
      page: 1
    }
  })
]).then(res => {
  //返回的是一个数组
  console.log(res[0]);
  console.log(res[1]);
})
  • 补充：axios.spread静态方法
1
2
3
4
5
6
axios.all([
  ...
]).then(axios.spread((res1, res2) => { //axios.spread自动展开数组
  console.log(res1);
  console.log(res2);
}))

三、axios配置

3.1 全局配置

1
2
3
4
5
6
7
8
axios({
  baseURL: "http://123.207.32.32:8000", //常用参数
  url: "/home/multidata", 
  method: "get",
  timeout: 5 //常用参数
}).then(res => {
  console.log(res);
})
  • 像上面例子，baseURL和timeout参数是非常常用的，可以将这些参数抽取出来，变成全局配置，每个axios请求自带这些参数
1
2
3
4
5
6
7
8
9
10
11
//全局配置实例
//利用axios.defaults来设置全局配置
axios.defaults.baseURL = "http://123.207.32.32:8000";
axios.defaults.timeout = 5000;

axios({
  url: "/home/multidata",
  method: "get"
}).then(res => {
  console.log(res);
})

3.2 常见的配置选项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//请求地址
    url: "/xx/xx/xx"

//请求类型
    method: "get"

//请求根路径
    baseURL: "http://xxx.com"

//请求前数据处理
    transformRequest: [function(data) {}]

//请求后数据处理
    transformResponse: [function(data) {}]

//自定义请求头
    headers: {'x-Requested-With':'XMLHttpREquest'}

//URL查询对象
    params: {id: 12}

//查询对象序列化函数
    paramsSerializer: function(params) {}

//request body(post请求参数存放位置)
    data: {key: value}

//超时设置
    timeout: 1000

//跨域是否带Token
    withCredentials: false

//自定义请求处理
    adapter: function(resolve, reject, config)

//身份验证信息
    auth: {username: "", pwd: "123456"}

//响应的数据格式
    responseType: "json"

四、axios实例

在分布式项目中，不是每个请求都是请求同一个服务器，这样导致而配置了全局默认配置baseURL写死了，不能切换服务器，这时候要考虑创建一个单独的实例，每个实例有自己对应的服务器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//创建单独的axios实例
const axiosInstance = axios.create({ //利用create方式创建实例，里面的参数为全局默认配置
  baseURL: "http://123.207.32.32:8000",
  timeout: 5000
});

//之前的请求以实例的方式实现
axiosInstance({
  url: "/home/multidata",
  method: "get"
}).then(res => {
  console.log(res);
})

axiosInstance({
  url: "/home/data",
  method: "get",
  params: {
    type: "cell",
    page: 1
  }
}).then(res => {
  console.log(res);
})

五、axios模块化封装

在开发中，利用第三方框架时，我们要有意识对框架进行封装，不要每个组件都导入框架，使用框架。这样会导致对此框架的依赖十分严重，一旦此框架不再维护或者出现巨大bug时候，会导致每一个组件都要进行修改，十分蛋疼，所有要对框架进行封装解决，避免出现此问题

5.1 封装方式一

  • 新建一个文件夹network，存放axios相关的js文件。新建一个request.js文件，里面存放主要的请求代码
  • 传递三个参数，利用回调函数的方式来执行请求后的相关代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//request.js
import axios from "axios";

export function request(config, success, failure) {
  //1.创建axios实例
  const instance = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000
  });

  //2.发送网络请求
  instance(config).then(res => {
    success(res); //成功，失败都回调函数
  }).catch(err => {
    failure(err);
  })
}
1
2
3
4
5
6
7
8
9
10
//使用方法
import {request} from "./network/request";
request({
  url: "/home/multidata",
  method: "get"
},res => {
  console.log(res);
}, err => {
  console.log(err);
});

5.2 封装方式二

  • 对回调函数，封装在一个参数中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//request.js
import axios from "axios";

export function request2(config) {
  const instance = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000
  });

  instance(config.baseConfig).then(res => {
    config.success(res);
  }).catch(err => {
    config.failure(err);
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//使用方法
import {request2} from "./network/request";
request2({
  baseConfig: {
    url: "/home/multidata",
    method: "get"
  },
  success(res) {
    console.log(res);
  },
  failure(err) {
    console.log(err);
  }
})

5.3 封装方式三

  • 封装成一个promise对象进行返回，使用方法变得和axios原生方式相似
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//request.js
import axios from "axios";

export function request3(config) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: "http://123.207.32.32:8000",
      timeout: 5000
    });

    instance(config).then(res => {
      resolve(res);
    }).catch(err => {
      reject(err);
    })
  })
}
1
2
3
4
5
6
7
8
9
10
//使用方法
import {request3} from "./network/request";
request3({
  url: "/home/multidata",
  method: "get"
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

5.4 封装方式四（推荐）

  • 由于axios的实例对象本身就是一个Promise对象，所以没有必要封装到一个Promise对象中进行返回，直接返回一个axios实例对象
  • 使用方法和方式三一样
1
2
3
4
5
6
7
8
9
10
11
//request.js
import axios from "axios";

export function request4(config) {
  const instance = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000
  });

  return instance(config)
}

六、拦截器

6.1 请求拦截

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const instance = axios.create({
  baseURL: "http://123.207.32.32:8000",
  timeout: 5000
});

//拦截请求
instance.interceptors.request.use(config => {
  //拦截下来的是一些配置信息
  console.log("请求拦截成功！");
  return config; //拦截完后记得放行
}, err => {
  console.log("请求拦截失败！")
});
  /*
  请求拦截使用场景：
    （1）config中一些信息不符合服务器需求，进行修改
    （2）请求过程中，显示一些加载画面
    （3）某些网络请求，必须携带一特殊的信息
   */

6.2 响应拦截

1
2
3
4
5
6
7
//拦截响应
  instance.interceptors.response.use(res => {
    console.log("响应拦截成功！");
    return res; //拦截完后记得放行
  }, err => {
    console.log("响应拦截失败！");
  });