完成第一个vue项目之axios使用心得

1.axios使用与安装
vue使用的axios是对ajax的封装使用，使用方法类似ajax 使用前需要先安装使用
npm i axios --save // 安装axios到该vue项目
1.1 axios局部使用（推荐使用）
安装完成后在需要使用axios传数据的页面import axios from ‘axios’ // 导入axios 然后直接使用axios
1.2 axios全局使用
在main.js里面使用import axios from ‘axios’ // 导入axios
然后使用原型的定理，将axios方法定义为vue方法 Vue.prototype.axios=axios
然后在需要使用axios的页面使用this.axios即可
1.3axios的封装使用
axios既可以正常使用url进行与后端的访问，也可以使用http封装的方式使页面更加简洁和减少代码量
使用说明：在跟目录下创建一个http.js文件
import axios from ‘axios’
const http = axios.create({
baseURL:’’ // 后端地址
})
export default http // 返回一个http
然后在main.js里面导入这个http文件:import http from ‘…/http’
之后Vue.prototype.$http=http就可以用this.$http代替原本的url地址了

2.axios基本格式
axios的基本格式与ajax类似，
axios{
url: ‘后端链接的地址’,
method:‘post’,// 与后端联系的方式（get or post）
headers :{
‘content-Type’: ‘application/json; charset=UTF-8’ //请求头格式 看后端要求 基本分为json格式和form-data格式
},
async:false, //控制axios是否为同步异步 true为默认格式异步 false为同步
data:{
:
} // 需要传输的数据—数据传输的名称一定要与后端对接好，数据不可少名称也不能错
} .then(res=>{
console.log(res)
}) // then是指当与后端对接成功的时候的之后操作，res可以看到后端返回给的数据并且能在then里面进行后续对数据的操作

3.axios在vue本地测试跨域问题
在vue未使用build打包之前与后端测试会出现跨域问题
解决的方法（始于api代理的方式解决）：
实现过程：在vue的config文件下的index文件下添加

然后在mian.js下引入全局变量实现过程与上面的axios相同

这种方法只可以用在vue尚未打包在本地测试的时候，如果vue打包上线会失效需要改回去

4.axios 的拦截器：interceptors
当后台服务器拒接接收数据或者服务器出错的时候 我们就需要使用拦截器来查看这些错误的详细信息和对这个错误进行前端的反馈
基本的使用方法：
在axios的后面加入
axios.interceptors.response.use(res => {
// 对响应数据做些什么
return response
}, err => {
// 对响应错误做些什么
console.log(‘err’, err.response) // 修改后
})