当前位置: 移动技术网 > IT编程>开发语言>JavaScript > axios 封装 及 基础用法

axios 封装 及 基础用法

2020年08月14日  | 移动技术网IT编程  | 我要评论
request.jsimport axios from 'axios';<!--创建一个 axios 的 对象-->const instance = axios.create({ <!--basrURL 会在发送请求的时候拼接在 url 参数前面--> baseURL:'接口地址', <!--请求超时时间--> timeout:5000})<!--请求拦截 所有的网络请求都会先走这个方法,我们可以在里面添加一些

请求写法

基本用法

引入 axios

import axios from "axios";

get 请求

<!--
axios.get 发起get请求
参数1 表示请求地址
参数2 表示配置信息
-->
axios.get('请求地址',{
    <!--
    params 表示传递到服务端的数据,以url参数的形式拼接在请求地址后面
    {page:1,per:3}
    url为:?page=1&per=3
    -->
    params:{},
    <!--表示请求头-->
    headers:{}
})
.then(res=>{})

post 请求

<!--
post 请求传递三个参数
请求地址
传递的数据,在请求体中传递
    axios 默认发送的数据是json 格式的
配置信息
    header
        conttent-type:'application/json' 默认
-->
axios.post('请求地址',{
    username:'123'
},{
    
}).then(res=>{})
.catch(res=>{})

axios 封装

request.js

import axios from 'axios';

<!--创建一个 axios 的 对象-->
const instance = axios.create({
    <!--basrURL 会在发送请求的时候拼接在 url 参数前面-->
    baseURL:'接口地址',
    <!--请求超时时间-->
    timeout:5000
})

<!--
请求拦截
    所有的网络请求都会先走这个方法,我们可以在里面添加一些自定义内容
-->
instance.interceptors.request.use(
    function(config) {
        return config;
    }
    function(err) {
        return Promise.reject(err);
    }
)

<!--
响应拦截
    所有的网络请求返回数据之后都会先执行此方法
    此处可以根据服务器返回的状态码做相应的处理
-->
instance.interceptors.response.use(
    function(response) {
        return response;
    }
    function(err) {
        return Promise.reject(err);
    }
)

export function get(url,params) {
    return instance.get(url,{
        params
    })
}

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)
}

index.vue

<!--请求封装的 get-->
import {get} from './request.js'

get('url 的 参数',{}).then(res =>{
    console.log(res)
})

本文地址:https://blog.csdn.net/liujiawang1219/article/details/107933925

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网