vue前端学习——axiosAPI请求

一、网络请求

1、安装axios

npm install axios --save
1

npm install axios@0.18.0 --save
1

2、基本使用

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
// axios({
//   url: 'http://123.207.32.32:8000/home/multidata',
//   method: 'get'
// }).then(res=>{
//   console.log(res)
// })
// axios({
//   //url:'http://123.207.32.32:8000/home/data?type=pop&page=1',
//   url:'http://123.207.32.32:8000/home/data',
//   params: {
//     type: 'pop',
//     page: 1
//   }
// }).then(res=>{
//   console.log(res)
// })

// axios.all([axios({
//   url: 'http://123.207.32.32:8000/home/multidata'
// }),axios({
//   url: 'http://123.207.32.32:8000/home/data',
//   params: {
//     type: 'sell',
//     page: 4
//   }
// })
// ]).then(result=>{
//   console.log(result)
// })

axios.default.baseURL = 'http://123.207.32.32:8000' //相同的路径
axios.default.timeout = 5000 //设置超时时间


axios.all([axios({
  url: '/home/multidata'
}),axios({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 4
  }
})
]).then(axios.spread((res1,res2) =>{
  console.log(res1);
  console.log(res2);
}))

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

3、数据接收到前端

4、axios拦截器

import axios from 'axios'


export function request(config){
  //1、创建axios实例
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    //2.拦截器
    //全局拦截：axios.interceptors.request;
    instance.interceptors.request.use(config =>{
     // console.log(config)
      //1、比如说config中的一些信息不符合服务器的要求，信息转化，配置相关
      //2、比如每次发送网络请求是，都希望在界面中显示一个请求图标
      //3、某些网络请求（比如登录，（token））,必须携带一些特殊的信息，拦截登录完善。
      return config
    },err =>{
      console.log(err)
    })
    //1、响应拦截
    instance.interceptors.response.use(res => {
      console.log(res);
      //拦截后，需要返回数据，否则处理之后没有返回数。就被拦截了。
      return res.data
    },err => {
      console.log(err)
    })
    //3.发送网路请求
    //2.1、请求成功在撤销请求图标
    return instance(config)
}
//------------------------3-----------------
// export function request(config){
// return new Promise((resolve,reject)=>{
//   //1、创建axios实例
//     const instance = axios.create({
//       baseURL: 'http://123.207.32.32:8000',
//       timeout: 5000
//     })

//   instance(config).then(res => {
//     resolve(res)
//   }).catch(err =>{
//     reject(err)
//   })
// })
// }
// -------------------回调实现---------------------
// export function request(config,success,failure){
//   //1、创建axios实例
//   const instance = axios.create({
//     baseURL: 'http://123.207.32.32:8000',
//     timeout: 5000
//   })

// instance(config).then(res => {
//   //console.log(res)
//   success(res)
// }).catch(err =>{
//   //console.log(err)
//   failure(err)
// })
// }
// ---------2----------------
// export function request(config){
//   //1、创建axios实例
//   const instance = axios.create({
//     baseURL: 'http://123.207.32.32:8000',
//     timeout: 5000
//   })

// instance(config.baseConfig).then(res => {
//   //console.log(res)
//   config.success(res)
// }).catch(err =>{
//   //console.log(err)
//   config.failure(err)
// })
// }

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

二、重温axios

1、请求方式

axios(config)

axios.request(config)

axios.get(url[,config])

axios.delete(url[,config])

axios.head(url[,config])

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

axios.put(url[,data[,config]])

axios.patch(url[,data[,config]])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2、import关键字

1）可以导入第三方包

如：import axios from 'axios'
1

3、使用详情

1）axios(config)

a、config参数

url:'http://localhost:80/add/addUser'	//参数controller地址
method: 'get'  //设置请求方式。post或者get

.then()  //访问成功后的回调
axios()	//这个方法会返回一个permission对象,拿到数据调用resolve，执行then()方法。
1
2
3
4
5

b、使用

axios.post()
axios.get()
1
2

c、返回值

概述：返回值是axios框架默认设置的。

config
data	//返回的数据
headers		//请求头
request
status
statusText
1
2
3
4
5
6

d、集体代码

axios({
  url:''
}).then(res=>{
console.log(res);//获取返回对象
})
//config是一个对象
//默认请求是get
1
2
3
4
5
6
7

2）发送带参请求

a、直接拼接

axios({
  url:'http://192.168.1.1:800/home/data?type=sell&page=3'
}).then(res=>{
  console.log(res)
})
1
2
3
4
5

axios({
  url:'http://192.168.1.1:800/home/data',
  params:{
    type: 'pop',
    page: 1
  }
}).then(res=>{
  console.log(res)
})
1
2
3
4
5
6
7
8
9

b、多请求协作

1、方式一：写一个函数同意处理二个请求的返回结果。

2、axios发送并发请求

//这个属性可以全局
axios.defaults.baseURL = 'http://123.207.32.32:8000'

//一个方法内部传入数组，数组里面，传递axios对象。then处理请求返回的数据
axios.all([axios({
    url:'/home/multidata'
}),axios({
    baseURL: 'http://123.207.32.32:8000',
    url:'/home/data',
    params:{
        type:'sell',
        page: 4
    }
})]).then(results =>{
    //处理返回内容
    console.log(results)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

返回结果处理

//对多个返回对象做分割，单独取出来。
.then(axios.spread((res1,res2)=>{
	console.log(res1);
    console.log(res2);
}))
1
2
3
4
5

c、对象的解构

//对象解构
const obj = {
name:'kobe',
age: 30
}
const {name,age} = obj;

//数组解构
const names = ['why','kobe','james']
const [name1,name2,name3] = names;
1
2
3
4
5
6
7
8
9
10

d、axios全局配置

//全局配置访问路径
axios.defaults.baseURL = 'http://123.207.32.32:8000'
//超时时间
axios.defaults.timeout = 5000
1
2
3
4

在这里插入图片描述

3）、创建axios实例，实例独立配置axios参数

概述：为了满足多个请求地址，创建实例

const instance1 = axios.create({
baseURL: 'http://222.111.22.33:8000',
timeout: 5000
})

instance1({
url:'/home/multidata',
}).then(res =>{
	console.log(res)
})

instance1({
  url:'/home/multidata',//基于baseURL请求的接口
  params: {
      type:'pop',//传递的参数，这个参数会跟随url传递。
      page: 1
  }
}).then(res =>{
	console.log(res)
})

const instance2 = axios.create({
    baseURL: 'http://222.111.22.33:8000',
    timeout: 10000
})
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

4）、封装axios网络请求

1、根据生命周期来发送网络请求

HelloWorld.vue


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

缺点：网络耦合度太高，后期框架维护缺陷。

1、新建request.js

#request.js

import axios from 'axios'

export function request(config,succes,failure){
	//1.创建axios的实例。
    const instance = axios.create({
        baseURL: 'http://123.203.32.32:8000',
        timeout: 5000
    })
    //发送真正的网络请求
    instance(config)
        .then(res =>{
        console.log(res);
        success(res);//通过这个函数，把返回结果回调出去。
    })
   .catch(err =>{
        console.log(err);
        failure(err)//通过这个函数把，返回的东西回调出去。
    })
}

export function instance2(){

}
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

2、使用request.js封装的axios模块

#main.js
import {request} from "./network/request";//这种方式，是导入的某个js文件的，函数。大括号里面的是函数名称。
request({
    url: '/home/multidata'
},res =>{
    console.log(res)
},err =>{
    failure(err)
})
//request()有三个参数，config,success,failure
//
//
//
//
//

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3、封装request函数只传一个参数

#main.js

import {request} from "./network/request"

request({
    baseConfig: {
        
    },
    success: function(res){
        
    },
    failure(err){
        
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4、promise封装axios的request.js

#request.js

import axios from 'axios'

export function request(config){
	return new Promise((resolve,reject)=>{
		//1.创建axios的实例。
    const instance = axios.create({
        baseURL: 'http://123.203.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
11
12
13
14
15
16
17
18
19
20
21

#main.js

import {request} from "./network/request"


request({url: '/home/multidata'})
.then(res =>{console.log(res);})
.catch(err=>{console.log(err);})
1
2
3
4
5
6
7
8

5、直接return axios

#request.js


import axios form 'axios'
export function request(config){
    const instance = axios.create({
        baseURL: 'http://123.21.12.12:8000',
        timeout: 5000
    })
    return instance(config)//create函数本身返回的是promise调用的时候。request可以直接.then.catch
}
1
2
3
4
5
6
7
8
9
10
11

#main.js

import {request} from "./network/request"

request({
    url:'/home/multidata'
        })
    .then(res=>{})
.catch(err=>{})
1
2
3
4
5
6
7
8
9

三、axios拦截器

1、拦截内容

（1）请求拦截

instance.interceptors.request.use(
config =>{
console.log('来到了request拦截success中');
return config
},
err=>{
console.log('来到了request拦截failure中')；
return err
}
)

1
2
3
4
5
6
7
8
9
10
11

（2）响应拦截

instance.interceptors.response.use(
    response => {
    console.log('来到了response拦截success中');
    return response.data
},
    err =>{
        console.log('来到了response拦截failure');
        return err
    }                              
)
1
2
3
4
5
6
7
8
9
10

2、拦截器使用

#request.js


import axios form 'axios'
export function request(config){
    //1.创建axios的实例
    const instance = axios.create({
        baseURL: 'http://123.21.12.12:8000',
        timeout: 5000
    })
    //2.axios的拦截器，全局拦截
    //axios.interceptors
    //拦截局部实例,拦截请求
    //2.1、请求拦截的作用
    instance.interceptors.request.use(
    	aaa/config =>{
           console.log(config);
            //这里面可以做的事情
            //1、比如config中的一些信息不符合服务器的请求
            //2、比如每次发送网络请求时，都希望在界面中显示一个请求的图标
            //3、某些网络请求（比如登录（token）），必须携带一些特俗信息
            //
            //    
        },
        err=>{
		   console.log(err)
        }
    );
    //2.2、拦截响应
    instance.interceptors.response.use(
    	res =>{
            console.log(err);
            return res.data;
        },
        err=>{
            console.log(err)
        }
    );
    //3.发送真正的网络请求
    return instance(config)//create函数本身返回的是promise调用的时候。request可以直接.then.catch
}
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

相关阅读:
神经网络阈值是什么意思,神经网络阈值如何确定
 快速傅里叶变换及其实现
 【nowcoder】牛牛举办编程比赛、删除公共字符
 STM32F4X RTC
[Linux] PXE批量装机
 Python文件操作
 IDEA中maven的Plugins报红解决方法
 八股文第十六天
 贝叶斯理论框架综述
 进程的描述、控制与通信
原文地址：https://blog.csdn.net/qq_45105305/article/details/126460030

vue前端学习——axiosAPI请求

一、网络请求

1、安装axios

2、基本使用

3、数据接收到前端

4、axios拦截器

二、重温axios

1、请求方式

2、import关键字

3、使用详情

1）axios(config)

a、config参数

b、使用

c、返回值

d、集体代码

2）发送带参请求

a、直接拼接

b、多请求协作

c、对象的解构

d、axios全局配置

3）、创建axios实例，实例独立配置axios参数

4）、封装axios网络请求

{{categories}}

1、新建request.js

2、使用request.js封装的axios模块

3、封装request函数只传一个参数

4、promise封装axios的request.js

5、直接return axios

三、axios拦截器

1、拦截内容

（1）请求拦截

（2）响应拦截

2、拦截器使用