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中拿到保存的tokenconst token = store.state.user.tokenif (token) {// 如果token存在 请求头里加上'Authorization'config.headers['Authorization'] = `Bearer ${token}`}return config
}, error => {// 如果请求有错误 打印出错误console.log(error)// 返回执行错误 让当前的执行链跳出成功 直接进入catchreturn 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里只包含部门信息请求。

axios是什么？如何在项目中使用?相关推荐

vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
vue 三、Axios (ajax 框架) 在vue 项目中的使用
前篇:ajax 与 axios的区别刚刚接触axios有好多疑惑.它和ajax有什么关系呢和区别呢?接下来一起看下: 1.区别 axios是通过promise实现对ajax技术的一种封装,就像jQu ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
在vue项目中对axios进行封装
在vue项目中对axios进行封装 1.引入axios,qs模块 import axios from 'axios'; import Qs from "qs"; import st ...
Nuxt项目中使用axios
把nuxtjs-axios模块添加到项目 yarn add @nuxtjs/axios // 使用yarn来安装模块npm install @nuxtjs/axios // 使用npm来安装模块注: ...
axios nodejs 上传图片_vue项目中使用axios上传图片等文件操作
axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XMLHttpRequest 从 node.js 发出 ...
axios，vue-axios在项目中的应用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中关于axios的功能: 1,从浏览器中创建XMLHttpRequests 2,从node.js常见Htt ...
vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
Vue学习笔记（二）—— vue项目中使用axios
一.文档链接 axios文档 vue开发插件二.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: 从浏览器中创建 XML ...

axios是什么？如何在项目中使用?

什么是 axios？

安装

在项目中使用

axios是什么？如何在项目中使用?相关推荐

最新文章

热门文章