vue中axios请求篇

vue中如何发起请求?

利用axios来发起请求，但是前期需要配置

首先安装axios

可以使用npm、yarn等进行安装

1. npm安装方式

npm install axios -sava //在项目文件夹中打开cmd或者终端进行安装依赖

1.  yarn安装方式

yarn add axios

引入axios。我一般是在src下创建一个utils文件夹，在其中新建一个request.js放置封装好的axios

 2.创建实例

// 创建实例
const instance = axios.create()// 创建实例后修改默认值
axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? 'http://127.0.0.1:8081' : 'https://api.example.com' // 默认请求地址，需根据环境判断请求的路径
axios.defaults.timeout = 10000 // 超时时间，单位毫秒
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' // post请求头的设置

 3.请求拦截

/*** 请求拦截器* 每次请求前，如果存在token则在请求头中携带token*/
axios.interceptors.request.use(config => {LoadingBar.start()// 添加tokenconst token = getToken()token && (config.headers.Authorization = "Bearer " + token)return config},error => Promise.error(error)
)

4. 响应拦截 

/*** 响应拦截器* 每次请求后，判断请求状态码是否正确，及数据做处理*/
axios.interceptors.response.use(/*** 传输层：接口正常或异常，用http状态码* 业务层：业务正常或异常，用自定义状态码*/// 请求成功res => {LoadingBar.stop()// HTTP 状态码if (res.status !== 200) {return Promise.reject(res)}// 业务状态码let code = res.data.codeif (!code || code === 2000) {// 无code，则请求的是html页面；有code，则返回请求的数据return Promise.resolve(res.data)}errorHandle(code, res.data.msg)return Promise.reject(false)},// 请求失败error => {LoadingBar.stop()const { response } = errorif (response) {// 请求已发出，但是不在2xx的范围 errorHandle(response.status, response.data.message)return Promise.reject(response)} else {tip('网络出现故障,请稍后再试')}}
)

5. 错误处理 

/*** 请求失败后的错误统一处理* @param {Number} status 请求失败的状态码*/
const errorHandle = (status, msg) => {// 状态码判断switch (status) {// 2002: 用户名/密码错误case 2002:tip('用户名或密码错误!')break// 4003: token过期，清除token并跳转登录页case 4003:toLogin("登录信息过期")break// 其他状态码...default:tip('后台维护中，请稍后再试')}
}/**
* 提示函数
*/
const tip = msg => {// 使用UI框架自带的错误弹框即可Vue.prototype.$msg.error(msg)
}/*** 跳转登录页* 携带当前页面路由，以便在登录完成登录后返回当前页面*/
const toLogin = async (msg) => {// 移除token、用户信息// 跳转登录页router.replace({path: '/login',query: {redirect: router.currentRoute.fullPath}})
}

使用 axios

 1. 创建api接口

　　以user模块为例，在src目录下新建api文件夹，用来存放项目的所有接口请求，新建user.js，代码如下

import axios from '@/utils/request'/*** @description: 用户登录* @param {String} username 用户名* @param {String} password 密码(aes加密)*/
export const userLogin = params => {return axios.post('/user/login', params)
}
// 其他user接口
...

页面使用

import { userLogin } from '@/api/user'userLogin({username: this.username,password: this.password, // 记得加密QAQ
}).then(res => {this.$msg.success('登录成功')
})

不封装单独使用

<script>//页面引入
import axios from 'axios'export default {data() {return {url:'https://xxxxxxxxxxxx.com/index.php?xxxxx'},},methods: {getVipAsklist(){axios.get(this.url).then(res => {console.log(res);if(res.data.result =='1'){this.asklist = res.data.qa_lsitthis.asklist = this.asklist.map((item)=>{return {title:item.title,content:item.content.replace(/\"/g, "&quot;")}})console.log(typeof this.asklist[0].content)this.agrement = res.data.xieyireturn}this.$message.error(res.msg)})},}
}
</script>

完美结束~