axios是什么?如何在项目中使用?
什么是 axios?Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。特性-从浏览器中创建 XMLHttpRequests-从 node.js 创建 http 请求-支持 Promise API-拦截请求和响应-转换请求数据和响应数据-取消请求-自动转换 JSON 数据-客户端支持防御 XSRF安装使用 npm:$ npm install axios使
·
什么是 axios?
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性
-从浏览器中创建 XMLHttpRequests
-从 node.js 创建 http 请求
-支持 Promise API
-拦截请求和响应
-转换请求数据和响应数据
-取消请求
-自动转换 JSON 数据
-客户端支持防御 XSRF
安装
使用 npm:
$ npm install axios
使用 bower:
$ bower install axios
使用 cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
在项目中使用
引入axios到
src\utils\request.js
import axios from 'axios'
import store from '@/store'
// // create an axios instance
// 创建一个axios实例
const service = axios.create({
// baseURL: 'http://ihrm-java.itheima.net', // 设置axios请求的基础的基础地址
baseURL: process.env.VUE_APP_BASE_API, // 从环境变量设置基地址
timeout: 5000 // 定义5秒超时
})
// 响应拦截器
service.interceptors.response.use(response => {
if (response.data.success) {
// 操作成功
return response.data
} else {
// 如果success为false 业务出错,直接触发reject
// 被catch分支捕获
return Promise.reject(new Error('请求失败'))
}
}, async error => {
console.log('请求出错啦', error)
if (error.response.data.code === 10002) {
// 这个表示token失效的10002是和后端商量好的 并不是http默认的
console.log('token失效')
// 如果响应回来的code=10002 调用actions中的user模块中的logout方法
await store.dispatch('user/logout')
// .vue -- this.$route.fullPath
// .js -- router.currentRoute.fullPath
// router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
}
// 如果有错误 打印出来错误
console.dir(error)
console.log(error)
return Promise.reject(error)// 返回执行错误 让当前的执行链跳出成功 直接进入 catch
})
// 请求拦截器
service.interceptors.request.use(config => {
// 从vuex中拿到保存的token
const token = store.state.user.token
if (token) {
// 如果token存在 请求头里加上'Authorization'
config.headers['Authorization'] = `Bearer ${token}`
}
return config
}, error => {
// 如果请求有错误 打印出错误
console.log(error)
// 返回执行错误 让当前的执行链跳出成功 直接进入catch
return Promise.reject(error)
})
// 最后一定要导出axios实例
export default service
引入axios实例到
src\api\user.js (这个实例的名字是可以修改的,不一定要与上面的实例一致)
import request from '@/utils/request'
/**
* 登录请求
* @param {mobile,password} data
* @returns
*/
export function login(data) {
return request({
url: '/sys/login',
method: 'post',
data
})
}
// 请求用户信息
export function getProfile() {
return request({
url: '/sys/profile',
method: 'post'
})
}
// 请求用户头像
export function getUserDetailById(id) {
return request({
url: `/sys/user/${id}`,
method: 'get'
})
}
项目中一般来说都是默认在src/api中写接口发请求,并且api里的请求.js文件也是分模块的,比如user.js里只包含用户信息请求,permisssion.js里只包含权限信息请求,department.js里只包含部门信息请求。
更多推荐
已为社区贡献2条内容
所有评论(0)