先npm install axios
npm install axios
我自己分装了请求方法所以单独的建了一个文件 创建了utils文件夹 在里面新建了 request.js文件
request.js文件
import axios from 'axios';
import VueCookies from 'vue-cookies';//这是cookies的npm 根据自己的需求这个可以忽略
export default {
//method 是请求方法 post,get
//url 是请求的地址
//data 是入参 {} 是对象 如 data={user_id:'212',id:'12'}
Ajax: function (method, url, data) {
return new Promise((resolve, reject) => {
axios({
method: method,
url: url, //本地调试
// url: process.env.API_ROOT + url, //打包
data: data,
dataType: 'jsonp',
headers: {
Token: VueCookies.get('token'),//这是我要从cookie中拿取的数据 后台要在header中传两个固定的值 你可以根据自己的情况去定义这的值 也可以值改成变量传值过来
Logintime: VueCookies.get('logintime'),//header 这的传值可以删除 根据自己的需求
},
})
.then(res => {
//res返回的参数自己起名字这里必须是res.data axios返回数据多一层data
resolve(res.data);
})
.catch(err => {
reject(err);
});
});
},
}
在min.js页面中
import request from './utils/request'
Vue.prototype.request = request
//定义成了全局方法 在.vue页面中 直接this.request.Ajax() 就可以调用了
//你也可以在request.js 中写其他的方法 也是可以调用 this.request.login() 这是调用其他的方法
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})
这个时候就完成了 可以去请求数据了 在index.vue中 这里就没有必要在去 引用request.js 文件了 因为已经设置成全局方法了
created(){
let data={user_id:'123'}
this.request.Ajax("post", "https://baidu.com",data).then(res=>{
console.log(res)
//res 可自己定义名称这个不是固定的些什么东西
//这里是请求成功了
//上面的分装 resolve(res.data);写成了 resolve(res); 你打印出来的会多一层data
}).catch((err){
console.log(err)
//这里是失败
})
}
后面有一篇文章我会写到 请求跨域 做代理的方法