axios封装
封装axios请求
npm insatll axios -S
- 创建axios.js 文件
// vue 插件
const VueAxios = {
vm: {},
// eslint-disable-next-line no-unused-vars
install (Vue, instance) {
if (this.installed) {
return
}
this.installed = true
if (!instance) {
// eslint-disable-next-line no-console
console.error('You have to install axios')
return
}
Vue.axios = instance
// 挂在到 vue 原型上面
Object.defineProperties(Vue.prototype, {
axios: {
get: function get () {
return instance
}
},
$http: {
get: function get () {
return instance
}
}
})
}
}
// 暴露出去
export {
VueAxios
}
- 创建request.js
import axios from 'axios' //注意路径
import { VueAxios } from './axios' //引入axios 挂载 可以不引入 ,注意路径
// 创建 axios 实例
const request = axios.create({
// API 请求的默认前缀
baseURL: process.env.VUE_APP_API_BASE_URL,
timeout: 600000 // 请求超时时间
})
request.interceptors.request.use(config=> {
console.log(config);
//========== 所有请求之前都要执行的操作 ==============
return config;
}, err=> {
//================== 错误处理 ====================
return Promise.resolve(err);
})
const installer = {
vm: {},
// eslint-disable-next-line space-before-function-paren
install(Vue) {
Vue.use(VueAxios, request)
}
}
// 共享出去
export default request
export {
installer as VueAxios,
request as axios
}
- 在main.js 引入
// 引入axios vue 插件 不用插件可以不用引入
import { VueAxios } from '@/utils/axios' //注意路径
Vue.use(VueAxios)
4.使用 在api.js 文件封装
import request from '@/utils/request' //注意路径
const userApi = {
Login: '/register/telExists',
Logout: '/api/user/logout/',
}
export default userApi // 暴露出去 提供使用
/**
* login func
* parameter: {
* username: '',
* password: '',
* remember_me: true,
* captcha: '12345'
* }
* @param parameter
* @returns {*}
* get 请求要使用 params拼接参数
* 其他请求 使用data携带参数
* headers 下载或许要使用请求携带token
* responseType 接收数据使用responseType指定接收格式 arraybuffer
*/
// post 请求
export function login (parameter) {
return request({
url: userApi.Login,
method: 'post',
data: parameter
})
}
// get 请求
export function getUserList (parameter) {
return request({
url: userApi.user,
method: 'get',
params: parameter
})
}
// 请求参数携带token 用于上传
export function uploadLicence(data) {
return request({
url: userApi.uploadLicence,
method: 'post',
headers: {
'Authorization': 'token ' + getToken()
},
data
})
}
// 接收数据流
export function EclipsePlugInDownload(data) {
return request({
url: userApi.EclipsePlugInDownload,
method: 'post',
responseType: 'arraybuffer',
data
})
}
跨域
跨域
为什么跨域?
全称是"跨域资源共享",是由于浏览器的同源保护策略引起,域名,端口,协议三方任意一个与浏览器请求不一致 会引起跨域。
跨域 只会发生在浏览器端,因为浏览器才有同源保护策略
解决跨域
- vue代理
vue2创建一个vue.config.js
module.exports = {
devServer: {
host:'0.0.0.0', //可以忽略不写
port: 8080,//它是用来修改你打开后的端口号的
open: false,//值为 true的话,项目启动时自动打开到浏览器里边, false不会打开
proxy:{
'/xspace': {
target: "http://121.4.74.114:8080",
changeOrigin: true,
pathRewrite: {
// '^/api' : ''
},
logLevel: "debug"
}
}
},
}
// 配置代理 记得把请求拦截里面的base_url 取消掉,要不会不生效
vue代理:
- 相当于起了一个node服务器去请求后端接口,node服务器把后端返回的数据返回给你,相当于你基于本地ip去请求,所以用了node代理请求。
并不是你去直接请求后端,而是你去请求本地的node服务,node服务再去请求后端,所以使用了代理,就不会再出现后端接口的i 而是用代理的形式 ,表现为你去请求node服务器。
eg: 使用/api代理192.168.10.38:8080(后端接口地址你调用接口 只需要使用你的本地ip +/代理/api(/前缀)+接口路由) - 因为你起项目,就是用的自己的本地ip ,axios不设置baseUrl的时候就会默认请求本地,所以你只需要写/api/+接口路由,同理在network里用了代理之后表现得请求接口地址 是你请求本地的地址+/api(/前缀)代理 。
- vue代理只生效于开发环境 ,生产环境无效。
- vue项目打包后会生成dist文件,代理全部失效,因为配置了代理但是失去了node服务器,请求首先是会请求本地,而且比正常接口请求多出了一个/api(/前缀)。
- 此时为了解决跨域使用一个nginx(常用) 在nginx配置使用正则把所有的/api(/前缀)匹配出来,但凡是走了http://本机ip:设置的端口/api(/前缀)的地方全部重定向到后端接口
未使用脚手架
常用jsonp解决跨域
Jsonp其实就是一个跨域解决方案。Js跨域请求json数据是不可以的,但是js跨域请求js脚本是可以的。可以把数据封装成一个js语句,做一个方法的调用。跨域请求js脚本可以得到此脚本。得到js脚本之后会立即执行。可以把数据做为参数传递到方法中。就可以获得数据。从而解决跨域问题。
- 首先,因为ajax无法跨域,然后开发者就有所思考
- 其次,开发者发现, script标签的src属性是可以跨域的把跨域服务器写成 调用本地的函数 ,回调数据回来不就好了?json刚好被js支持(object)调用跨域服务器上动态生成的js格式文件(不管是什么类型的地址,最终生成的返回值都是一段js代码)这种获取远程数据的方式看起来非常像ajax,但其实并不一样便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP。
- 传递一个callback参数给跨域服务端,然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据即可。
简单数据
跨域服务器
文件:remote.js
localHandler({"result":"我是远程js带来的数据"});
本地
script type="text/javascript">
var localHandler = function(data){
alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
};
</script>
<script type="text/javascript" src="跨域服务器/remote.js"></script>
复杂数据
跨域服务器
文件:flightResult.php
代码:
flightHandler({
"code":"CA1998",
"price": 1780,
"tickets": 5
});
本地
<script type="text/javascript">
// 得到航班信息查询结果后的回调函数
var flightHandler = function(data){
alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
};
// 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
var url = "跨域服务器/flightResult.php?code=CA1998&callback=flightHandler";
// 创建script标签,设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head,此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
那么服务器到底做了什么呢? 说到底,就是拼接字符串。
// 数据
$data = [
"name":"anonymous66",
"age":"18",
"like":"jianshu"
];
// 接收callback函数名称
$callback = $_GET['callback'];
// 输出
echo $callback . "(" . json_encode($data) . ")"