H5用axios代替Ajax调取服务器接口

功能需求:普通ajax调取后台接口需要写很多代码,且不好统一管理token,问大神同事说使用axios代替ajax,感觉很不错!

所需材料:一个a.html页面,一个config.js,一个api.js
下面进入正题
第一步:在a.html引入vue.js, axios文件, a.js, config.js 和 api.js,路径自己配好

第二步:配置config.js

/* 服务器地址 */
var base_url = 'http://************'; //测试服务器
//var base_url = 'http://**********'; //正式服务器


/******************* 配置的拦截器 封装的axios ***********************/
// 创建axios实例
const service = axios.create({
  baseURL: base_url, // api的base_url
  timeout: 120000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
  //config.headers['token'] = 66;
  config.headers['Content-Type'] = "application/json";
  // config.headers['id'] = window.sessionStorage.getItem("id");
  // console.log(config.headers)
  return config
}, error => {
  // Do something with request error
  // console.log(error) // for debug
  promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
  response => {
      const res = response.data

      return res
  },
  error => {
      console.log(error) // for debug
      Toast('服务器异常, 请稍后重试')

      return Promise.reject(error)
  }
)

第三步:在api.js放所有的接口,注意一下get方法和post方法稍有点不同,无参可以不写

/* ***************************incoming*********************************** */
function findById(params) { //面签页面--根据apid查询已有信息
    return service({
        url: '/api/backend/approvalProcess/findById',
        method: 'get',
        params
    })
}

function faceSignSave(params) { //面签页面--保存提交
    return service({
        url: '/api/backend/faceSign/save',
        method: 'post',
        data: JSON.stringify(params)
    })
}

第四步:在a.js使用,confirmBtn()为点击方法,faceSignSave()就是api中定义的接口名称,params 就是传的参数,注意格式faceSignSave(params).then(res => { })

//点击确定
   confirmBtn() {
         const params = { //总的提交信息
             id: this.apId, //混合传过来  业务流id
         }
         let that = this;
         faceSignSave(params).then(res => {
             if (res.code == 0) {
                //do something
             } else {
                //do something
             }
         })
     }

这样就完成了,如果接口多了,就会很方便在config.js中统一管理接口了

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » H5用axios代替Ajax调取服务器接口

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活