vue-cli项目中的请求数据的与复用请求
场景:
之前刚开始使用vue-cli的时候请求后台数据是不知道怎么使用,后来在网上看到说是用 axios ,所以我也用 axios了,在使用过程中可以请求也没什么bug所以在这里推荐给大家,如果是第一次使用麻烦跟着做吧~
安装:
直接安装axiox
npm install axios --save
发起请求:
在main.js文件中引入
import axios from 'axios';//引入文件
Vue.prototype.$http = axios;//将axios挂载到Vue实例中的$ajax上面,在项目中的任何位置通过this.$http使用
this.$ajax({
url:'/api/articles',//url这里是你请求后台的数据的地址,直接把地址卸载api中后面的articles是文件中的对象或者是数组
method:'get',//请求方式 //这里可以添加axios文档中的各种配置
}).then(function (res)
{ console.log(res,'成功');
}).catch(function (err)
{ console.log(err,'错误');
})
//还可以像下面这么简写
this.$ajax.get('api/publishContent').then((res) => {
console.log(res,'请求成功')
},(err)=>{ console.log(err,'请求失败');
});
开始封装:
开始这样用领导也没说什么,后来子啊快都写完的时候领导说这样完成了项目之后不好维护,如果地址换了,每个都找,太麻烦,所以要让我给把这些封装起来,我这个小暴脾气,你懂得~在心里问候一下,所以建议大家还是封装起来吧,也比较省事,省的自己还得多加班.封装的是我从网上找的,自己刚学也不会,所以在网上看的
原文的连接是:https://blog.****.net/OBKoro1/article/details/78450040?locationNum=4&fps=1
先创建了个文件夹,里面是三个文件
下面是文件里的内容
api.js:
import { fetch } from "./fetch"; //引用fetch,js
import api from './url'; //引用url.js
//查看用户
// export function lookOption(issuer,userId) { //lookOption是你要调用接口的名字,issuer,userId是传进来的参数
// return fetch({
//api.Hallowmas 引用url.js里面的数据
// url:api.Hallowmas+'helloween'+issuer+'/question',
// method:'get', //请求方法
// params:{
// currentUserId:userId //传过去的参数
// }
// })
// }
如果还有别的请求地址复制上面的在来一下便可以了~
fetch.js：
import axios from 'axios'; //引入axios
export function fetch(options){
return new Promise((resolve,reject)=>{
const instance = axios.create({//instance创建一个axios实例,可以自定义配置,可在axios文档中查看详情
//所有的请求都会带上这些配置,比如全局都要用的身份信息等.
headers:{
'Content-Type': 'appliction/json',
'X-Requested-With': 'xmlhttprequest',
//'token_in_header':"gllobal_.token",//token从全局变量那里传过来
},
timeout:30 * 1000 //30秒超市
});
instance(options)
.then(response => {//then请求成功之后进行实名操作
resolve(response); //把请求到的数据发到引用请求的地方
})
.catch(error => {
console.log('请求异常信息:' +error);
reject(error);
});
});
}
这个文件夹里的基本不需要改动~
url.js:
export default {
Hallowmas:'api',
Hallowmas:'http://mobile.qczww.cn/home/data/chapters.json?',//这个是我的例子,后面的参数是我在api文件夹里给传过来的
}
在组件里面使用接口：
在你需要请求数据的页面里:
记得username 和phoneNumber 是你传入的参数
温馨提示:尽量使用封装的axios吧,不然就领导让你封装,或者是你如果自己改的时候真的也是麻烦事,
小白出品,请大神勿喷~ლ(⌒▽⌒ლ)