vue 常见问题积攒

一、vue中使用async/await

把 ES2015 语法转为 ECMAScript 5 语法

npm i babel-plugin-transform-runtime --save-dev

npm i babel-runtime --save

在项目根目录下有个.babelrc文件,增加一句代码:

"plugins":["transform-runtime"]

二、vue中配置跨域

config 中的index.js 文件

proxyTable: {

     '/api': {

          target: 'http://******.com', //源地址

          changeOrigin: true, //是否跨域

          pathRewrite: {

                '^/api': 'http://******.com' //路径重写

          }

     }

},

三、vue中封装axios

新建文件request.js

import axios from 'axios'

// 创建axios实例

const service = axios.create({

     baseURL: 'http://192.168.2.100:7777', //设置默认请求地址

     timeout: 50000, // 请求超时时间

})

service.interceptors.request.use(config => {

     config.headers = {

          'Content-Type':'application/x-www-form-urlencoded',

     }

     config.params.token = global_.user.Token // 接口默认传参

     config.params.lang = global_.lang  // 接口默认传参-----有什么默认的蚕食都可以写在这

     return config

})

service.interceptors.response.use(

     response => {

          const res = response.data

          if (!res.Success) { //请求不成功的处理写在这里

               if (res.ResultCode == "100"||res.ResultCode == "800") {

                    处理异常状态

               }

     }

     return response.data;

},error => {   

//请求异常处理,比如断网,请求状态500等,或者重新发起请求

     var config = error.config

     if (!error.response) {

          console.log('断网了', error)

     }

     if (error.response.status === 404) {

          console.log('异常', 404)

     }

     if (error.response.status === 401) {

          console.log('异常', 401)

     }

     if (error.response.status === 500) {

          var back = new Promise(function(resolve) {

               setTimeout(function() {

                    resolve();

               }, config.retryInterval|| 1);

          });

          //返回axios的实体,重试请求

          return back.then(function() {

               return service(config);

          });

     }

     return Promise.resolve(error.response)

})

export default service

这样调用

function apiSetDefaultcoin(params) {

     return request({

          url:'/api/account/defaultcoin', //接口地址

          method:'POST',

          params

     })

}

你可能感兴趣的:(vue常见问题累计)