美文网首页
看到的请求

看到的请求

作者: 糖醋里脊120625 | 来源:发表于2022-11-22 16:09 被阅读0次

request.js

import axios from 'axios';

// 创建请求实例
const instance = axios.create({
  baseURL: '/api',
  // 指定请求超时的毫秒数
  timeout: 1000,
  // 表示跨域请求时是否需要使用凭证
  withCredentials: false,
});

// 前置拦截器(发起请求之前的拦截)
instance.interceptors.request.use(
  (config) => {
    /**
     * 在这里一般会携带前台的参数发送给后台,比如下面这段代码:
     * const token = getToken()
     * if (token) {
     *  config.headers.token = token
     * }
     */
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

// 后置拦截器(获取到响应时的拦截)
instance.interceptors.response.use(
  (response) => {
    /**
     * 根据你的项目实际情况来对 response 和 error 做处理
     * 这里对 response 和 error 不做任何处理,直接返回
     */
    return response;
  },
  (error) => {
    const { response } = error;
    if (response && response.data) {
      return Promise.reject(error);
    }
    const { message } = error;
    console.error(message);
    return Promise.reject(error);
  },
);

// 导出常用函数

/**
 * @param {string} url
 * @param {object} data
 * @param {object} params
 */
export function post(url, data = {}, params = {}) {
  return instance({
    method: 'post',
    url,
    data,
    params,
  });
}

/**
 * @param {string} url
 * @param {object} params
 */
export function get(url, params = {}) {
  return instance({
    method: 'get',
    url,
    params,
  });
}

/**
 * @param {string} url
 * @param {object} data
 * @param {object} params
 */
export function put(url, data = {}, params = {}) {
  return instance({
    method: 'put',
    url,
    params,
    data,
  });
}

/**
 * @param {string} url
 * @param {object} params
 */
export function _delete(url, params = {}) {
  return instance({
    method: 'delete',
    url,
    params,
  });
}

export default instance;

api.js

import { post } from '@/utils/request';

export default class User {
  /**
   * 登录
   * @param {String} username 用户名
   * @param {String} password 密码
   * @returns
   */
  static async login(username, password) {
    return post('/login', {
      username,
      password,
    });
  }
}

vue

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import User from '@/api/user';



async  function ceshi(){
  const res = await User.login("大佬", 123456);
      console.log(res);
}


</script>

相关文章

  • 看到的请求

    request.js api.js vue

  • Shell - Curl模拟Post/Get请求

    一、Get请求 Curl命令+请求接口的地址 想看到详细的请求信息,可在最后加上-v参数 Curl命令+请求接口的...

  • Volley结构图

    从图中,我们看到,Volley主要由两部分组成: 网络请求对象(记录请求信息,请求状态:请求中、取消、请求成功) ...

  • OkHttp详解二(抓包和https)

    1.以下是抓取get请求的头信息。可以看到Fiddler抓包工具抓取的内容非常详细,包括请求方法,请求地址,请求协...

  • WKWebview添加请求头

    给WKWebview添加请求头 当你看到这个标题的时候,说明你有要给WKWebView每次页面内请求发起时添加请求...

  • Restful接口测试工具 - postman

    初识restful client 接触 postman插件 模拟API 请求P 如图, 可以看到各种的请求方式都能...

  • 【为了尊严】爬虫(一)

    一、请求 1.GET&POST GET请求中的参数包含在URL里面,数据可以在URL中看到,而POST请求的URL...

  • 关于post请求无法传递headers的token,而get可以

    关于预请求的发送: 之前一直报“签名验证不通过”,如下图,可以看到只有一个请求,并非预请求 说明这是一个简单请求,...

  • Java Bridge Method 详解

    背景: 最近在看Spring Mvc的源码, 看到调用请求处理方法的过程中时看到最后调用的请求方法时拿取的是bri...

  • vue router $router与$route区别用法

    query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会在...

网友评论

      本文标题:看到的请求

      本文链接:https://www.haomeiwen.com/subject/ccrnxdtx.html