[JavaScript知识库]封装接口+配置跨域

新建一个network里面有http和request,api.js写在views里

http:里面是请求拦截和相应拦截,在请求拦截可以配置token,在相应拦截可以配置一些后端的状态码

request.js :封装参数和请求方式

http.js

import axios from "axios";
import { Message } from 'element-ui';
const http = axios.create({
    baseURL: "/api",//配置了跨域,起了别名,所以这个用别名,配置在下面vue.config.js
    timeout: 6000
})
 
// 请求拦截
http.interceptors.request.use(config => {
    // let token = localStorage.getItem('token') || ''
    // config.headers.Authorization = token
    return config
}, err => {
    throw new Error(err)
})
 
 
// 响应拦截
http.interceptors.response.use(res => {
    // console.log(res);
    // let { status, msg } = res.data.meta
    // switch (status) { //key=value
    //     case 200:
    //         Message({
    //             message: msg,
    //             type: 'success',
    //             showClose: true,
    //             center: true,
    //         })
    //         break;
    //     case 201:
    //         Message({
    //             message: '创建成功',
    //             type: 'success',
    //             showClose: true,
    //             center: true,
    //         })
    //         break;
    //     case 204:
    //         Message({
    //             message: '删除成功',
    //             type: 'success',
    //             showClose: true,
    //             center: true,
 
    //         })
    //         break;
    //     case 400:
    //         Message({
    //             message: '请求的地址不存在或者包含不支持的参数',
    //             type: 'error',
    //             showClose: true,
    //             center: true,
    //         })
    //         break;
    //     case 401:
    //         Message({
    //             message: '未授权',
    //             type: 'error',
    //             showClose: true,
    //             center: true,
    //         })
    //         break;
    //     case 403:
    //         Message({
    //             message: '被禁止访问',
    //             type: 'error',
    //             showClose: true,
    //             center: true,
    //         })
    //         break;
    //     case 404:
    //         Message({
    //             message: '请求的资源不存在',
    //             type: 'error',
    //             showClose: true,
    //             center: true,
 
    //         })
    //         break;
    //     case 422:
    //         Message({
    //             message: '发生一个验证错误',
    //             type: 'error',
    //         })
    //         break;
    //     case 500:
    //         Message({
    //             message: '内部错误',
    //             type: 'error',
    //         })
    //         break;
    // }
    return res.data.data
}, err => {
    throw new Error(err)
})
 
export default http;

request.js

import http from "./http";
// post请求: 传参数没有明确规定使用params接受参数就是要使用data请求体接受,get请求要使用params接受
// put 也相当与post请求,如果报参数错误,就是接受参数的请求体错了post/put用data,get请求用params
function request({ method = 'get', url, data = {}, params = {} }) {
    return http({
        method,
        url,
        data,
        params
    })
}
 
export default request;

在views里面建api.js接口

import request from "../../network/request";
// 用户登陆的接口  post请求使用data请求体
// export const login = (data) => request({ method: "post", url: '/login', data: data });
// // // 获取用户列表的接口 ,需要有默认参数. pagenum: 1,pagesize: 10,,所以要接受,get是params参数接受
// export const getUserList = (params) => request({ url: '/users', params });
// // // 用户添加的接口 post请求使用data请求体
// export const addUser = (data) => request({ method: "post", url: '/users', data });
// //请求修改用户id users/:uId/state/:type
// export const getEdit = (data) => request({
//     method: "put",
//     data,
//     url: "users/" + data.uid + "/state/" + data.type,
// })
 
 
export const home = () => request({ url: '/home', })

在根目录建vue.config.js

//修改默认配置,配置跨域
module.exports = {
    //解决打包目录错误,
    publicPath: "./",
    devServer: {
        proxy: {
            "/api": {
                // http://www.sirfang.com/build/ajax_get_list这是完整路径,将com/后的路径重写路径为api
                // 1 目标路径 这里相当于公共的地址
                target: "http://m.sirfang.com/api",
                port: 9090, // 1.1端口号 默认的可以不配
                open: true, // 1.2运行项目自启
                //2 允许跨域
                changOrigin: true,
                //3 重写路径
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

在页面使用

<template>
  <div class="home">
    <div>123</div>
  </div>
</template>
 
<script>
import { home } from "./api";
export default {
  data() {
    return {};
  },
  methods: {
    getHome() {
      home().then((res) => {
        console.log(res);
      });
    },
  },
  watch: {},
  computed: {},
  components: {},
  created() {
    this.getHome();
  },
};
</script>
 
<style lang="scss" scoped></style>

跨域详见我的博客

图例