首页> 前端开发> Vue axios项目实践

[文章]Vue axios项目实践

收藏
0 816 0

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

axios 使用

1、创建api.js文件

import axios from 'axios'

 2、设置默认配置信息

axios.defaults.timeout = 12000; //如果接口请求时间超过设定时间,将终止请求
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //与服务端协商使用json,string格式
axios.defaults.baseURL = env.DOMAIN; //设置默认请求域名

 3、利用拦截器做预处理

请求时的拦截器

axios.interceptors.request.use((config) => {
    Loading.start(); //loading图标显示
    return config;
}, error => console.log(error));

 请求完成后的拦截器


axios.interceptors.response.use(response => response, (error) => {
  if (error && error.response) {
    switch (error.response.status) {
      case 0: break;
      case 401:  // 授权错误;
        window.location.replace = '/login';
        break;
      case 403: break;
      case 404:
        console.log('接口名不存在或错误');
        break;
      case 500:
      case 501:
      case 502:
      case 503:
        console.log('服务器处理请求出错');
        break;
      case 1002:
        window.location.replace = '/login';
        break;
      default:
        console.log('请求错误');
        break;
    }
  }
  console.log('error');
  throw error;
});

  4、api封装


export default async function fetch(url,
  { method = 'GET',
    params = {},
    data = {},
    headers = {},
    ...options
  } = {}) {
  try {
    let [res, error] = [null, null];

    function vAxios() { // eslint-disable-line
      return axios({
        url,
        method,
        params,
        data,
        headers,
        ...options,
      }).then((r) => { res = r; })
        .catch((e) => { error = e; });
    }

    await vAxios();
    return new Promise((resolve, reject) => {
      if (res) {
        resolve(res);
      } else {
        reject(error);
      }
    }).then(r => r.data)
      .catch((e) => {
        throw e;
      });
  } catch (e) {
    throw e;
  }
}

 5、直接调用fetch方法,传对应参数即可;

axios 解决跨域问题

在开放过程中tnpm run dev,程序启动localhost url,访问接口域名不在同一个域名,比如遇到下面的错误就是这种情况

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://h5sdk.game.qq.com' is therefore not allowed access.

 解决方案:

(1) 在本地host中设置127.0.0.1 bbs.learnfuture.com

(2)访问url域名使用bbs.learnfuture.com

(3)在webpack配置文件中增加访问接口配置

proxyTable: {
      '/api/testApi': {
            target: 'http://bbs.learnfuture.com/api/testApi', // 接口的域名
            changeOrigin: true, // 如果接口跨域,需要进行这个参数配置,
            pathRewrite: {
                '^/api': ''
            }
        }
}

 (4)api.js调用接口如下:

export const getGameList = params => { return axios.get('/api/testApi?action=get', { params: params}); };

 

前端开发
最近热帖
{{item.Title}} {{item.ViewCount}}
近期热议
{{item.Title}} {{item.PostCount}}