小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前端和后端的概念
-
任何一个应用程序都有前端和后端
- 前端：客户端，就是浏览器
- 后端：服务器
-
前端开发
- 控制页面的样式
- 数据的展示
-
后端开发 操作数据库，返回给我们需要的数据
交互的应用场景
-
从后端获取一些数据，将其进行展示或计算
- 浏览页面的时候，打开一个页面，这时候就会有交互产生，会从后端获得页面数据在前端页面显示
-
将用户在页面中提交的数据发送给后端
- 登录的场景中体现的较为明显，登录操作的时候需要把用户名和密码发送后端，后端验证之后，确定是否能登录成功
Axios基本介绍
官方地址：github.com/axios/axios 中文地址：www.axios-js.com/zh-cn/docs/ Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
Axios安装
CDN方式 unpkg.com/axios/dist/… NPM npm install axios
用法
<script src='./../js/axios.min.js'></script>
#基本用法
//可以通过向 axios 传递相关配置来创建请求
//axios(config) 基于promise的api ，所以在then方法中接收数据
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(res=>console.log(res));
#get请求
// 为给定 ID 的 user 创建请求
send_by_axiosGet2(){
axios.get('http://127.0.0.1:4000?name=三体').then(res=>{
console.log(res);
})
.catch(erro=>{
console.log(erro);
})
}
// 上面的请求也可以这样做
axios.get('http://127.0.0.1:4000',{
params:{
name:'三体'
}
}).then(res=>{
console.log(res);
})
#执行post请求
axios({
method: 'post',
url: 'http://127.0.0.1:4000',
data: {
name:'三体'
}
}).then(res => {
console.log(res);
});
#执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/vue.js"></script>
<script src="../lib/axios.min.js"></script>
<script src="./../lib/qs.min.js"></script>
</head>
<body>
<div id="app">
<button @click='send_by_axios'>axios01</button>
<button @click='send_by_axiosGet'>axios01.gt</button>
<button @click='send_by_axiosGet2'>axios02.gt</button>
<button @click='send_by_axiospost2'>axios03.post</button>
</div>
<script>
axios.defaults.headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
send_by_axios() {
axios({
method: 'get',
url: 'http://127.0.0.1:4000',
params: {
name: '三体'
}
}).then(res => {
console.log(res);
});
},
send_by_axiosGet() {
axios.get('http://127.0.0.1:4000', {
params: {
name: '三体'
}
}).then(res => {
console.log(res);
})
},
send_by_axiosGet2() {
axios.get('http://127.0.0.1:4000?name=三体').then(res => {
console.log(res);
})
.catch(erro => {
console.log(erro);
})
},
send_by_axiospost2() {
axios.post('http://127.0.0.1:3001/user', Qs.stringify({
act:'reg',
user:'laoche',
pass:'12345'
}) ).then(res => {
console.log(res);
})
}
}
});
</script>
</body>
</html>
执行多个并发请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/vue.js"></script>
<script src="../lib/axios.min.js"></script>
<script src="../lib/qs.min.js"></script>
</head>
<body>
<div id="app">
<button @click='axiosGet'>axiosGet请求方式</button>
<button @click='axiosPost'>axiosPost请求方式</button>
<button @click='axiosAll'>执行多个并发请求</button>
</div>
<script>
axios.defaults.headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
// axiosGet() {
// axios({
// methods: 'get',
// url: "http://127.0.0.1:4000",
// params: {
// name: '三体'
// }
// }).then(res => {
// console.log(res);
// })
// },
axiosGet() {
return axios({
methods: 'get',
url: "http://127.0.0.1:4000",
params: {
name: '三体'
}
})
},
axiosPost() {
return axios.post('http://127.0.0.1:3001/user', Qs.stringify(
{
act: 'reg',
user: 'laochen',
pass: '123456'
}
))
},
//执行多个并发请求
axiosAll() {
axios.all([this.axiosGet(), this.axiosPost()])
.then(axios.spread(function (gt, pos) {
console.log(gt, pos);
}))
}
}
});
</script>
</body>
</html>
请求方法的别名
为方便起见，为所有支持的请求方法提供了别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
注意
在使用别名方法时， url、method、data 这些属性都不必在配置中指定。
配置默认值
你可以指定将被用在各个请求的配置默认值
全局的 axios 默认值
axios.defaults.baseURL = 'https://api.example.com'; //基础地址
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; //设置公共请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
//通常前端通过POST请求向服务器端提交数据格式有4中，分别是"application/x-www-form-urlencoded"格式、" multipart/form-data"格式、"application/json"格式和"text/xml"格式。通常最常见的是"application/json"格式，也就是通过JSON字符串形式。
创建实例
可以使用自定义配置新建一个 axios 实例
axios.create([config])
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
实例方法
以下是可用的实例方法。指定的配置将与实例的配置合并。
axios#request(config)
axios#get(url[, config])
axios#delete(url[, config])
axios#head(url[, config])
axios#options(url[, config])
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
请求配置见手册
响应结构
某个请求的响应包含以下信息
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {},
// 'request'
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance the browser
request: {}
}
拦截器
在请求或响应被 then 或 catch 处理前拦截它们。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
//此处拦截器内部一定要有return的内容 不然的话拦截将终止在这里 无法往下运行
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
console.log('响应被拦截');
console.log(response);
// 过滤拦截信息
return response.data;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/vue.js"></script>
<script src="../lib/axios.min.js"></script>
<script src="../lib/qs.min.js"></script>
</head>
<body>
<div id="app">
<button @click='axiosGet'>axiosGet请求方式</button>
<button @click='axiosPost'>axiosPost请求方式</button>
<button @click='axiosAll'>执行多个并发请求</button>
</div>
<script>
axios.defaults.headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
//此处拦截器内部一定要有return的内容 不然的话拦截将终止在这里 无法往下运行
console.log(config);
//更改请求方式 此处先不管能否成功 只查看请求方式是否更改成功
config.method = 'post';
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
// axiosGet() {
// axios({
// methods: 'get',
// url: "http://127.0.0.1:4000",
// params: {
// name: '三体'
// }
// }).then(res => {
// console.log(res);
// })
// },
axiosGet() {
return axios({
methods: 'get',
url: "http://127.0.0.1:4000",
params: {
name: '三体'
}
})
},
axiosPost() {
return axios.post('user', Qs.stringify(
{
act: 'reg',
user: 'laochen',
pass: '123456',
}
),
{
baseURL: 'http://127.0.0.1:3001/'
}
)
},
//执行多个并发请求
axiosAll() {
axios.all([this.axiosGet(), this.axiosPost()])
.then(axios.spread(function (gt, pos) {
console.log(gt, pos);
}))
}
}
});
</script>
</body>
</html>
如果你想在稍后移除拦截器，可以这样：
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
可以为自定义 axios 实例添加拦截器
const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
