Vue封装网络请求二

这里以以下接口为实例

https://api.apiopen.top/getJoke?page=10&count=3&type=text

1. src下创建utils目录，创建request.js封装网络请求

//封装网络请求
import $axios from "axios"
import qs from "query-string"

// 错误信息的响应方法
const errorHandle = (status,other) => {
        switch(status){
            case 400:
            // 请求头和服务器的限制
                console.log(" 服务器不理解请求的语法");
                break;
            case 401:
                // token验证失败，用户身份验证失败
                console.log("（未授权） 请求要求身份验证");
                break;
            case 403:
                // 用户身份过期了，服务器请求限制
                console.log("（禁止） 服务器拒绝请求");
                break;
            case 404:
                // 网络请求地址错误
                console.log("（未找到） 服务器找不到请求的网页。");
                break;
            default:
                console.log(other);
                break;
        }
         }


// 创建axios对象
const instance = $axios.create({
timeout:5000  // 请求超时
})

// 全局配置
// instance.defaults.baseURL = 'http://v.juhe.cn/';
// instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
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;
},
error => Promise.reject(error)
)

instance.interceptors.response.use(
// 成功 
/**
 * 成功和失败的判断：
 *  1.请求成功和请求失败
 *  2.请求成功：结果的成功和结果的失败
 */
response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
error => {
    const { response } = error; // ES6的解构赋值
    /**
     * response包含的信息：
     *  status
     *  data
     */

    if(response){
        // 给出开发者具体的错误信息
        // errorHandle(response.status,response.data);
        return Promise.reject(response);
    }else{
        console.log("请求中断或者断网了");
    }

    
    if(error){
        errorHandle(error.status,error.data);
        return Promise.reject(error);
    }else{
        console.log('请求中断或者断网');
    }
    
}
)

export default instance;

2. 封装请求方法
   目录结构

   --src
   	--utils
   		--request.js
   	--api
   		--base.js
   		--index.js
   

base.js

const base = {
	baseURL : "https://api.apiopen.top/",
	a : "getJoke"
	}
 export default base;

index.js

import $axios from '../utils/request'
import base from './base'

export function getJoke(type) {
    return $axios.get(base.baseURL+base.a, {
        params: {
            page: 10,
            count: 3,
            type: type
            
        }
    }).then(
        res => {
            return res
        }
    )
}

3. 组件中调用

  <template>
  <div class="joke-com">
    <button @click="getjoke()">GET</button>
    <div v-for="(item, index) in joke" :key="index">
      <p>text：{{ item.text }}</p>
      <p><img :src="item.image" ></p>
    </div>
  </div>
</template>
<script>
import { getJoke } from "../../api/index";
export default {
  name: "joke",
  data() {
    return {
      joke: "",
    };
  },
  methods: {
    async getjoke() {
      let data = await getJoke("text");
        console.log(data.data.result);
        this.joke = data.data.result;
    },
  },
};
</script>