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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

发起请求方法使用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>

以上是 基于vue2版本框架建立axios网络数据请求的使用 的全部内容， 来源链接： utcz.com/z/380357.html

回到顶部