基于vue2版本框架建立axios网络数据请求的使用

一、框架搭建 --数据请求以及代理

发起请求方法使用axios v0.26.0版本插件库来解决api接口调用

因为这个请求库是使用了Promise实现的一个XHR封装、它可以实现请求和响应（403）拦截,同时可以实现通用配置

1.安装 cnpm i -S axios

vue脚手架的webpack配置：

module.export={
   lintOnSave:false,
   pages:{
    index:{
       template:'./public.index.html',
       entry:'./src/index.js'
}   
},
    devServer:{
    open:true,
    port:16666,
   //实现数据请求代理配置
    proxy:{
   //指定需要代理的请求，不是每一个请求都要代理，所以需要一个代理请求地址
    '/apis':{
    //代理过后的地址：http://localhost:16666/apis/user/app/code
    //代理目标=>http://www.shuiyue.info:12600/apis/user/app/code
   target:'http://www.shuiyue.info:12600'，
   //需要把多余的/apis从地址中匹配掉=>http://www.shuiyue.info:12600/user/app/code
   pathRewrite:{
  //重写地址的规则
  '/apis':''
}
}
}
}
}

//这里写代理服务器的配置以及端口

 

2.请求接口封装：

在系统中，需要使用async + await 来实现同步代码，但是同步只支持Promise.resolve，基础配置应该是一样的，所以需要一次性配置

然后在使用的时候，就不需要来写这些通用配置

//引入axios
import axios from 'axios'

//封装一个ajax请求方法
function ajaxFunc(req){
    return new Promise(resolve=>{
    //可以把动态数据 url 、method、params、data抽取出来
   axios.request({
    //设置请求地址
   url:req.url,
   method:req.method || 'GET'，
   //是请求的基础地址
   //单页面组件请求的地址：
   //baseURL:'http://www.shuiyue.info:12600',
   //baseURL:'/apis', //这个请求写好代理服务器 就直接应字段名,http:localhost:16666/apis/user/app/code
   //请求头
  headers:{token:'test token'},
  //超时配置 -- 设置请求的最大时长
  timeout:5000,
  //params参数配置 - - 它的参数会自动拼接到url地址上
  params:req.params || {},
  //data参数 - - 不能在get请求中使用，它是请求体参数
  data:req.data || {}
//}).then(data=>{
  //请求返回的是一个response对象，希望得到数据
  //console.log(data.data)
//})
  }).then(({data})=>{
  //可以对response对象进行结构赋值取值
  // 返回数据
    resolve(data)
}).catch(e=>{
  console.log('---请求失败')
  resolve(e)
})
})
})
}

export default ajaxFunc

在另外文件可以直接引入封装后的axios请求方法

//对所有的登录接口进行封装，只接收参数，然后返回请求结果，所有的接口都应该单独导出
//单独导出一个获取验证码的接口
export function getVdtCodeApi(phone){
  //需要返回一个Promise回去
  return Ajax({
   url:'/user/app/code',
   //params接收的是一个对象
  //params :{phone:phone}
   params:{phone}
})
}

//这个文件上只需要写url接口地址后面的然后需要传参这些直接可以提交
//这样对简洁配置文件参数，会方便有助于开发和维护性

在页面组件调用api请求接口：

<script>
//首先要引入单个接口
import {getVdtCodeApi} from '../../apis/loginApi'

export defalut {
 methods:{
   loginEvt(){
  //缓存用户登录标识，然后再进行页面跳转
  //因为是读取vuex，所以必须使用vuex缓存
  this.$store.commit('common/setToken','token')
  this.$router.push('/home')
},
  //获取验证码的方法
  async getVdtCode(){
   //要发起ajax请求--需要使用引入axios库
  // 首先获取url地址 发送get请求
  //get(url:string,config?:AxiosRequestConfig):Promise
   //url地址得到后就要去Axios Request Config axios的请求配置对象

  //使用同步代码 ajaxFunc 这个方法只能是一个只有resolve的Promise
    let result=await this.ajaxFunc({url:'/user/app/code',params:{phone:'13455567777'}})
//这个接口可能其他页面也会使用，所以应该把这个url地址也定义出去 
  let result=await getVdtCodeApi('1369999999')
  console.log(result)
}
}
 
}


</script>