axios 是vue 请求接口必须用到的,和ajax一个意思
做项目最好就是封装好,全局使用,比较方便
话不多说,开始
首先vue 项目安装axios
npm install axios
然后,新建一个http.js的文件
下面内容直接粘进去,里面有详细介绍
import axios from 'axios' //引入
import { getToken } from '@/utils/token'//获取token的文件,登录后会返回token,然后用缓存存起来,再去读,后面贴出文件
import { Toast } from 'vant';
let baseURL = 'http://192.168.0.1:9090'
//这一步的目的是判断出当前是开发环境还是生成环境,方法不止一种,达到目的就行
// if(process.env.NODE_ENV=="development"){
// baseURL=''
// }else{
// baseURL=''
// }
let config = {
baseURL: baseURL,
timeout: 30000 //设置最大请求时间
}
const _axios = axios.create(config)
/* 请求拦截器(请求之前的操作) */
_axios.interceptors.request.use(
config => {
//如果有需要在这里开启请求时的loading动画效果
config.headers.Authorization = getToken?getToken:""; //添加token,需要结合自己的实际情况添加,
return config;
},
err => Promise.reject(err)
);
/* 请求之后的操作 */
_axios.interceptors.response.use(
res => {
//在这里关闭请求时的loading动画效果
//这里用于处理返回的结果,比如如果是返回401无权限,可能会是跳回到登录页的操作,结合自己的业务逻辑写
if (res.data.code === 401 ) {
Toast("无权限操作")
}
if (res.data.code === 400 ) {
Toast("请求网络失败")
}
if (res.data.code === 404 ) {
Toast("请求网络失败")
}
return res;
},
err => {
if (err) {
//在这里关闭请求时的loading动画效果
Toast("请求网络失败")
}
return Promise.reject(err);
}
);
//封装post,get方法,其他的自行往下加,比如put,delete
const http = {
get(url='',params={}){
return new Promise((resolve, reject) => {
_axios({
url,
params,
headers:{'Content-Type': 'application/json;charset=UTF-8'},
method: 'GET'
}).then(res => {
resolve(res.data)
return res
}).catch(error => {
reject(error)
})
})
},
post(url='',params={}){
return new Promise((resolve, reject) => {
_axios({
url,
data:params,
headers:{'Content-Type': 'application/json;charset=UTF-8'},
method: 'POST'
}).then(res => {
resolve(res.data)
return res
}).catch(error => {
reject(error)
})
})
}
}
export default http
然后,新建一个api.js, 用于存放你的请求方法
//引入刚才的http.js文件
import https from './http.js';
//设置个对象,就不用一个个暴露了,直接暴露对象
let apiFun = {};
/* 获取列表 */
//查询列表,详情就是get
/* /api/getlist是请求接口地址,有http.js里面的Ip加上,如:http:192.168.0.1:9090//api/getlist */
apiFun.getlist = function(params) {
return https.get('/api/getlist', params)
}
/* 新增保存检查计划 */
//保存都是post
apiFun.saveJcInfo = function(params) {
return https.post('/api/saveJcInfo', params)
}
//暴露出这个对象
export default apiFun;
然后在main.js全局引入
import apiFun from "@/api/api.js";
Vue.prototype.$apiFun = apiFun;//请求接口api
最后,在页面使用
//apiFun就是全局的api方法, 就相当于api.js里面的apiFun,用哪个方法就把后面的名字换掉
//{'itemCode':'SXZA'}是参数,如果参数多,可以在外部定义好,直接把名字传入,如第二个
getlist(){
this.$apiFun.getlist({'itemCode':'SXZA'}).then((res) => {
console.log(res)
})
}
saveJcInfo(){
let info = {
'name':'张三',
'tel':'1938483484',
'id':'1'
}
this.$apiFun.saveJcInfo(info).then((res) => {
console.log(res)
})
}
有的新手不明白token是什么,干什么的,这里贴代码
获取token是由登录接口返回,然后自己存起来。一般cookies
token.js
//需要先安装这个js-cookie
//npm install js-cookie --save
import Cookies from 'js-cookie'
const TokenKey = 'account_token'
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}