六.axios
Axios 是一个基于 promise 的网络请求库,作用于浏览器和 nodejs 中
1.安装命令:
npm install axios
<1>这样就安装成功了
<2>检查package.jsonaa看看是否有axios的代码生成
2.导入命令:
import axios from 'axios';
导入实例
3.使用axios
(1) axios的API列表
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])
(2) 参数说明:
url:请求路径
data:请求体数据,最常见的是JSON格式数据
config:配置对象,可以设置查询参数、请求头信息
(3)为了解决跨域问题,可以在vue.config.js 文件中配置代理
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 7070,//前端域名
proxy: {
'/api': {
target: "http://localhost:8080",//后端域名
pathRewrite: {
'^/api': ''
}
}
}
}
})
- 在
vue.config.js
文件中配置代理,可以解决开发环境中的跨域请求问题。 defineConfig
函数用于定义项目的配置。transpileDependencies
设置为true
,表示需要转译依赖。devServer
对象包含了开发服务器的配置,其中port
设置为7070
,表示开发服务器运行在7070端口。proxy
对象定义了代理的规则,这里配置了当请求路径以/api
开头时,请求将被代理到http://localhost:8080
。pathRewrite
对象用于重写请求的路径,这里将/api
路径前缀重写为空字符串,即去掉/api
前缀。
(4) axios的post、get方法示例:
axios.post('/api/admin/employee/login', {
username: 'admin',
password: '123456'
}).then(res => {
console.log(res.data)
}).catch(error => {
console.log(error.response)
})
axios.get('/api/admin/shop/status', { //获得店铺的连接状态
headers: {//第二个参数对象
token: "xxx.yyy.zzz"//post返回的token
}
})
- 使用
axios.post
方法发送一个POST请求到/api/admin/employee/login
路径,请求体中包含用户名admin
和密码123456
。 .then
方法用于处理请求成功的情况,打印响应数据res.data
。.catch
方法用于处理请求失败的情况,打印错误响应error.response
。- 使用
axios.get
方法发送一个GET请求到/api/admin/shop/status
路径,请求配置中包含自定义的请求头headers
,其中token
字段用于传递认证令牌。
(5)不管post或者是get, axios可以用一个统一的方式来发送请求
axios统一使用方式:axios(config)
//发起一个post请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
- 使用
axios
函数并通过传递一个配置对象来发起请求,这种方式可以适用于不同类型的HTTP请求。 method
属性指定了请求的方法,这里是'post'
。url
属性定义了请求的URL地址,这里是/user/12345
。data
属性包含了请求体数据,这里是一个对象,包含firstName
和lastName
两个字段
(6)axios同意请求方式的代码示例
axios({
url: "/api/admin/employee/login",
method: "post",
data: {
username: "admin",
password: "123456"
}
}).then((res) => {
console.log(res.data.data.token);
axios({
url: "/api/admin/shop/status",
method: "get",
params: { id: 1 },
headers: {
token: res.data.data.token
}
}).catch((error) => {
console.log(error);
});
});
- 使用
axios
函数发起一个POST请求到/api/admin/employee/login
,请求体中包含用户名和密码。 .then
方法用于处理POST请求成功的情况,打印出响应数据中的token。- 在成功获取token后,使用同一个token发起一个GET请求到
/api/admin/shop/status
,请求参数中包含一个id
。 - GET请求的配置中添加了自定义的请求头
headers
,其中token
字段用于传递从POST请求中获取的认证token。 - 如果GET请求失败,则在
.catch
方法中打印出错误信息。