axios框架 封装使用

request.js文件 创建网络请求文件

import axios from 'axios'
export function request(config) {
  //创建axios实例
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })

  // axios的拦截器
  // 请求拦截
  instance.interceptors.request.use(config => {
      // console.log(config);
      // 1.比如config中的一些信息不符合服务器的要求

      // 2.比如每次发送网络请求时,都希望在界面显示一个请求的图标

      // 3.某些网路请求(比如登录(token)),必须携带一些特殊的信息
      let token = localStorage.getItem('token');
      token && (config.headers.Authorization = token)
      return config
    }),
    err => {
      return Promise.reject(err)
      console.log(err)
    }
    // 响应拦截
  instance.interceptors.response.use(response => {
      return response
    }),
    err => {
      return Promise.reject(err)
      console.log(err)
    }

  // 发送真正的网络请求
  return instance(config)
}

home.js文件 引入网络请求文件

import { request } from './request'
// 没有传参的
export function getHomeMultidata() {
  return request({
    url: '/home/multidata'
  })
}
// 有传参的
export function getHomeGoods(type, page) {
  return request({
    url: '/home/data',
    params: {
      type,
      page
    }
  })
}

detail.js文件

import { request } from './request'

export function getDetail(iid) {
  return request({
    url: '/detail',
    params: {
      iid
    }
  })
}

export function getRecommend() {
  return request({
    url: '/recommend'
  })
}

// import axios from "axios";
// export function requset(config) {
//   return new Promise((resolve, reject) => {
//     //创建axios实例
//     const instance = axios.create({
//       baseURL: "http://123.207.32.32:8000",
//       timeout: 5000
//     });
//     // 发送真正的网络请求
//     instance(config)
//       .then(res => {
//         resolve(res);
//       })
//       .catch(err => {
//         reject(err);
//       });
//   });
// }

export class Goods {
  constructor(itemInfo, columns, services) {
    this.title = itemInfo.title
    this.desc = itemInfo.desc
    this.newPrice = itemInfo.price
    this.oldPrice = itemInfo.oldPrice
    this.discount = itemInfo.discountDesc
    this.columns = columns
    this.services = services
    this.realPrice = itemInfo.lowNowPrice
  }
}

export class Shop {
  constructor(shopInfo) {
    this.logo = shopInfo.shopLogo
    this.name = shopInfo.name
    this.fans = shopInfo.cFans
    this.sells = shopInfo.cSells
    this.score = shopInfo.score
    this.goodsCount = shopInfo.cGoods
  }
}

export class GoodsParam {
  constructor(info, rule) {
    // 注: images可能没有值(某些商品有值, 某些没有值)
    this.image = info.images ? info.images[0] : ''
    this.infos = info.set
    this.sizes = rule.tables
  }
}

前端代理跨域请求封装

先建立vue.config.js文件
引入以下代码

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: '跨域的默认地址',
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        }
    }
}

在man.js文件 引入以下代码

import api from './api'
Vue.prototype.$api = api

在建立utils目录 目录下建立 request.js
引入以下代码

import axios from "axios"
import qs from "querystring"

const errorHandle = (status,info) =>{
    switch(status){
        case 400:
            console.log("服务器收到客户端通过PUT或者POST请求提交的表示，表示的格式正确，但服务器不懂它什么意思");
            break;
        case 401:
            console.log("客户端试图对一个受保护的资源进行操作，却又没有提供正确的认证证书");
            break;
        case 403:
            console.log("客户端请求的结构正确，但是服务器不想处理它");
            break;
        case 404:
            console.log("资源被围定义(网络请求地址错误)");
            break;
        case 500:
            console.log("执行请求处理代码时遇到了异常，它们就发送此响应代码");
            break;
        case 503:
            console.log("最可能的原因是资源不足：服务器突然收到太多请求，以至于无法全部处理");
            break;
        default:
            console.log(info);
            break;
    }
}

// 创建axios的实例对象
const instance = axios.create({
    timeout:5000
})

// 处理并发请求方法
instance.all = axios.all;
instance.spread = axios.spread

// 全局配置
// instance.defaults.baseURL = "http://iwenwiki.com";
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 请求拦截和响应拦截
instance.interceptors.request.use(
    config =>{
        if(config.method === 'post'){
            config.data = qs.stringify(config.data);
        }
        return config
    },
    // 为什么这里要用Promise返回
    error => Promise.reject(error)
)

instance.interceptors.response.use(
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response) ,
    error =>{
        const { response } = error;
        if(response){
            /**
             * 错误信息以状态码为主
             */
            errorHandle(response.status,response.data);
            return Promise.reject(response);
        }else{
            console.log("请求被中断");
        }
    }
)

/**
 * 提供get和post的请求方式
 */

export function get(url,params){
    return new Promise((resolve,reject) =>{
        instance.get(url,{
            params
        }).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            reject(err.data);
        })
    })
}

export function post(url,params){
    return new Promise((resolve,reject) =>{
        instance.post(url,params).then(res =>{
            resolve(res.data)
        }).catch(err =>{
            reject(err.data)
        })
    })
}

export default instance

在建立api目录 目录下建立 index.js
引入以下代码

import { 请求方式 如get } from '../utils/request'

const api = {
// 请求地址
  getMusic(){
    return get("/api/personalized/newsong")
},
}

export default api  

使用

this.$api.方法().then(res => {})