(精华)2020年8月6日 Angular axio的封装

x33g5p2x  于2022-03-06 转载在 其他  
字(2.3k)|赞(0)|评价(0)|浏览(462)
import { Injectable } from '@angular/core';
import axios from 'axios';
import Qs from 'qs';
axios.defaults.timeout = 5000;
import { environment } from '../../environments/environment';

console.log(environment.baseURL);
axios.defaults.baseURL = environment.baseURL; //填写域名
//http request 拦截器  客户端给服务端 的数据 
axios.interceptors.request.use(
  config => {

    config.headers.common = {
      'X-API-TOKEN': localStorage.getItem('token'),
      'version': '1.0',
      'Content-Type': 'application/json;charset=UTF-8'
    }

    if (config.data && config.data.form) {
      //转化成formData格式
      // transformRequest只能用在 PUT, POST, PATCH 这几个请求方法
      config.transformRequest = [function (data) {
        //方式一
        delete data.form;
        // var ret = '';
        // for (let it in data) {
        //   ret += it+'=' +data[it] + '&';
        // }
        // return ret.substring(0,ret.length-1);

        //方式二:
        var test2 = Qs.stringify(data);
        return test2;
      }]
    }

    return config;
  },
  error => {
    return Promise.reject();
  }
);

//响应拦截器即异常处理 -  -- 服务给客户端的数据进行处理
axios.interceptors.response.use(response => {
  if (response.status === 200) {
    return Promise.resolve(response);
  } else {
    return Promise.reject(response);
  }
  // return response
}, err => {
  if (err && err.response) {
    var errorMsg = '';
    switch (err.response.status) {
      case 400:
        console.log('错误请求')
        errorMsg = '错误请求';
        break;
      case 401:
        console.log('未授权,请重新登录');
        errorMsg = '未授权,请重新登录';
        break;
      case 403:
        console.log('拒绝访问')
        errorMsg = '拒绝访问';
        break;
      case 404:
        console.log('请求错误,未找到该资源')
        errorMsg = '请求错误,未找到该资源';
        break;
      case 405:
        console.log('请求方法未允许')
        errorMsg = '请求方法未允许';
        break;
      case 408:
        console.log('请求超时')
        errorMsg = '请求超时';
        break;
      case 500:
        console.log('服务器端出错')
        errorMsg = '服务器端出错';
        break;
      case 501:
        console.log('网络未实现')
        errorMsg = '请求方法未允许';
        break;
      case 502:
        console.log('网络错误')
        errorMsg = '网络错误';
        break;
      case 503:
        console.log('服务不可用')
        errorMsg = '服务不可用';
        break;
      case 504:
        console.log('网络超时')
        errorMsg = '网络超时';
        break;
      case 505:
        console.log('http版本不支持该请求')
        errorMsg = 'http版本不支持该请求';
        break;
      default:
        console.log(`连接错误${err.response.status}`)
    }

    alert(errorMsg);

  } else {
    console.log('连接到服务器失败')
  }
  return Promise.resolve(err.response)
})

@Injectable({
  providedIn: 'root'
})
export class AxiosService {

  constructor() { }
  //  包装一个 直接利用axios自身是一个Promise对象的思想封装
  postFun(url, params) {
    return axios.post(url, params)
      .then(response => {
        if (response.status == 200) {
          return Promise.resolve(response.data);
          //注意必须要有return,相当于new Promise里的resolve,告诉接口已经获取数据
        }
      })
      .catch(err => {

      })
  }

  getFun(url, params = {}) {

    return new Promise((resolve, reject) => {
      axios.get(url, {
        params: params
      })
        .then(response => {
          resolve(response.data);
        })

    })
  }

}

相关文章