• heima--ajax封装


    import axios from 'axios'
    import { Loading } from 'element-ui'

    // qs表单序列化:不是每个POST传值,都需要qs进行表单序列化操作
    // java,.net,php很早出现在后端语言,需要进行序列化操作
    // 进入公司,什么时候需要序列化,需要与后端开发人员沟通
    // 登录的两种操作:1,session,登录的时候向后端发送了用户名和密码,后端收到了用户名和密码他会在我们浏览器设置一个cokie
    // 这个cokie里面存放的就是个人信息,这个登录没什么特殊操作。
    // token,登录的时候向服务器发送了用户名和密码,服务器会根据发送的用户名和密码加密生成一个随机的字符串token,并把
    // 这个token返回给前端,后续的接口请求当中带上这个返回的token.
    // 创建一个axios的对象
    // 发送请求前baseURL拼接在参数前面
    /*
    把baseURL挂在axios上,和下面的方法效果一样
    axios.defaults.baseURL = 'http://localhost:8888'
    axios.defaults.timeout = 5000
    */
    const instance = axios.create({
      baseURL: 'http://localhost:8888',
      timeout: 5000
    })
    let loadings
    // 请求拦截,所有的请求都会先走这个方法
    instance.interceptors.request.use(
      function (config) {
        loadings = Loading.service()
        // config代表axios的配置
        console.group('请求挂载')
        console.log(config)
        console.groupEnd()
        config.headers.authorization = ''
        // if (config.method === 'post') {
        //   config.data = qs.stringify(config.data)
        // }
        return config
      },
      function (err) {
        return Promise.reject(err)
      }
    )
    // 响应拦截,请求响应后会先执行此方法
    instance.interceptors.response.use(
      function (response) {
        loadings.close()
        console.group('响应挂载')
        console.log(response)
        console.groupEnd()
        return response
      },
      function (err) {
        return Promise.reject(err)
      }
    )
    // 封装get讲求方法
    //  get请求参数一url地址,参数二:{}为配置信息固定属性,属性名不能变属性值可以变。1,params:{}表示传递到服务器的数据,
    //  以url参数的形式拼接在地址后面。2,headers:{}为表示请求头。
    export function get (url, params) {
      return instance.get(url, {
        params
      })
    }

    //  post请求三个参数,参数1:url.参数2:传递的数据,在请求体中传递。axios默认发送的是json格式。参数3:默认配置信息(config)。
    export function post (url, data) {
      return instance.post(url, data)
    }

    export function del (url) {
      return instance.delete(url)
    }

    export function put (url, data) {
      return instance.put(url, data)
    }
  • 相关阅读:
    边缘节点为什么不能直接通过 kubernetes service 直接访问云端 master 节点中的 API Server
    Leaflet中原生方式实现测距
    http网页是否能引用https资源/调用https接口?https网页是否能引用http资源/调用http接口?
    Vite2 Vue3 SSR
    SQL模糊查询的四种匹配模式
    vue3中ref、reactive、toRef、toRefs区别
    iis在访问vue服务时报错
    vue3中使用elform
    koa2cors实现过程以及应用
    chrome v8的垃圾回收机制和内存泄漏分析
  • 原文地址:https://www.cnblogs.com/xiaoxiao95/p/13058172.html
Copyright © 2020-2023  润新知