vue数据请求并封装方法加代理

先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)
		//这里是失败
	})
}

后面有一篇文章我会写到请求跨域做代理的方法

vue数据请求 并封装方法加代理

猜你喜欢

vue数据请求并封装方法加代理