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.csdn.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吧,不然就领导让你封装,或者是你如果自己改的时候真的也是麻烦事,

小白出品,请大神勿喷~ლ(⌒▽⌒ლ)