精华内容
下载资源
问答
  • 使用axios封装get、post 方法,包括封装post请求发送header方法 在具体使用时根据需要作适当调整即可 import axios from 'axios'; const REQUEST_QUIET_HEADER_NAME = 'Request'; axios.interceptors.response....

    首先引入axios
    使用axios封装get、post 方法,包括封装post请求发送header方法
    在具体使用时根据需要作适当调整即可

    
    import axios from 'axios';
    
    const REQUEST_QUIET_HEADER_NAME = 'Request';
    
    axios.interceptors.response.use(
        function (res) {
            if (!res.data.success) {
                const isQuiet = res.config.headers[REQUEST_QUIET_HEADER_NAME];
                handleErrorResponse(res.data.msg, isQuiet);
                if (isQuiet) {
                    return res;
                }
                return;
            }
            return res.data;
        },
        function (err) {
            handleErrorResponse(err.response.data.message, err.config.headers[REQUEST_QUIET_HEADER_NAME]);
            return Promise.reject(err);
        }
    );
    
    export function handleErrorResponse(msg, isQuiet) {
        if (!isQuiet) {
            alert(msg);
        }
        throw msg;
    }
    
    export function sendGetRequest(url, query, isQuiet = false) {
        let options;
        if (isQuiet) {
            options = {
                headers: {
                    [REQUEST_QUIET_HEADER_NAME]: isQuiet
                }
            };
        }
        return axios
            .get(
                `${url}?${Object.keys(query).map(k => (k + '=' + query[k])).join('&')}`,
                options
            )
            .then(response => response.data);
    }
    
    export function sendPostRequest(url, data, isQuiet = false) {
        let options;
        if (isQuiet) {
            options = {
                headers: {
                    [REQUEST_QUIET_HEADER_NAME]: isQuiet
                }
            };
        }
        return axios.post(url, data, options).
            then(response => response.data);
    }
    

    使用

    import {sendPostRequest} from './common_actions';
    export function getList(paramData, headers) {
        return sendPostRequest(
            '/api/hello',
            paramData,
            headers
        );
    }
    
    展开全文
  • 具体的封装代码如下: import axios from 'axios' import qs from 'qs' export function get(url,data){ return new Promise((resolve... axios.get(url, { params: data }).then((res) => { if (res) {

    具体的封装代码如下:

    import axios from 'axios'
    
    import qs from 'qs'
    
    export  function get(url,data){
        return new Promise((resolve, reject) => {
    
            axios.get(url, {
      
              params: data
      
            }).then((res) => {
      
              if (res) {
      
                //成功回调
      
                resolve(res);
      
              }
      
            }).catch((error) => {
      
              reject(error);
      
            })
      
          })
    }
    export  function post(url, data){
        return new Promise((resolve, reject) => {
    
            axios.post(url, qs.stringify(data), {
      
              headers: {
      
                'Content-Type': 'application/x-www-form-urlencoded',
      
                'Accept': 'application/json'
      
              }
      
            }).then((res) => {
      
              if (res) {
      
                //成功回调
      
                resolve(res);
      
              }
      
            }).catch((error) => {
      
              reject(error);
      
            })
      
          })
    }
    

    具体使用:

    import {post,get} from './axios'
    
    
    //用户注册
    export const toRegister = (username,password,status)=>post('/api/register',{username,password,status});
    
    //用户登录
    export const toLogin = (username,password)=>post('/api/login',{username,password});
    
    
    //文章发布
    export const toRelease = (title,content,label,mold,currentime,author,image)=>post('/api/release',{title,content,label,mold,currentime,author,image});
    
    
    //获取所有文章
    export const getAllContent =()=>get('/api/getallcontent');
    
    展开全文
  • vue-axios封装get方法和post方法

    千次阅读 2019-08-06 20:42:05
    /** * get方法,对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] */ export function get(url, params){ return new Promise((resolve, ... axios.get(url...
    /**
     * get方法,对应get请求
     * @param {String} url [请求的url地址]
     * @param {Object} params [请求时携带的参数]
     */
    export function get(url, params){
        return new Promise((resolve, reject) =>{
            axios.get(url, {
                params: params
            }).then(res => {
                resolve(res.data);
            }).catch(err =>{
                reject(err.data)
        })
    });}

    get方法:我们通过定义一个get函数,get函数有两个参数,第一个参数表示我们要请求的url地址,第二个参数是我们要携带的请求参数。get函数返回一个promise对象,当axios其请求成功时resolve服务器返回 值,请求失败时reject错误值。最后通过export抛出get函数。 

    /**
     * post方法,对应post请求
     * @param {String} url [请求的url地址]
     * @param {Object} params [请求时携带的参数]
     */
    export function post(url, params) {
        return new Promise((resolve, reject) => {
             axios.post(url, QS.stringify(params))
            .then(res => {
                resolve(res.data);
            })
            .catch(err =>{
                reject(err.data)
            })
        });
    }

    post方法:原理同get基本一样,但是要注意的是,post方法必须要使用对提交从参数对象进行序列化的操作,所以这里我们通过node的qs模块来序列化我们的参数。这个很重要,如果没有序列化操作,后台是拿不到你提交的数据的。

    这里有个小细节说下,axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。区别就是,get的第二个参数是一个{},然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。两者略微的区别要特别注意! 

     

    原文链接:https://www.bbsmax.com/A/GBJrqMy3z0/

    展开全文
  • vue 2.x axios 封装get 和post方法 import axios from 'axios' import qs from 'qs' export class HttpService { Get(url, data) { return new Promise((resolve, reject) => { axios.get(url, { params: ...
  • import axios from '...import { getCookie } from '../api/cookies'import {getQueryString} from '../api/unit' const instance = axios.create({ timeout: 5000, baseURL:'', withCredentials: true, headers...

    import axios from 'axios';

    import { getCookie } from '../api/cookies'

    import {getQueryString} from '../api/unit' const instance = axios.create({ timeout: 5000, baseURL:'', withCredentials: true, headers: {token: getCookie('token')}

    });

    //http response 拦截器

    instance.interceptors.response.use( response => { var res=response.data; if (res.code == 'A0301' || res.code == 'A0311') { // 拦截 对应特殊错误特别处理 } else { return response; } }, error => { console.log("response error :" + error); if (error.response) { switch (error.response.status) {// token失效处理 case 401://token 失效 return; } } return Promise.reject(error) // 返回接口返回的错误信息 }

    );

    /**

    * 封装get方法

    * @param url

    * @param data

    * @returns {Promise}

    */

    export function get(url,params={}){ return new Promise((resolve,reject) => { instance.get(url,{ params:params }).then(res => { resolve(res.data); }).catch(err =>{ reject(err.data) }) })

    }

    /**

    * 封装post请求

    * @param url

    * @param data

    * @returns {Promise}

    */

    export function post(url,data = {}){ return new Promise((resolve,reject) => { instance.post(url,data).then(res => { resolve(res.data); }).catch(err =>{ reject(err.data) }) })

    }

    /**

    * 封装patch请求

    * @param url

    * @param data

    * @returns {Promise}

    */

    export function patch(url,data = {}){ return new Promise((resolve,reject) => { instance.patch(url,data).then(res => { resolve(res.data); }).catch(err =>{ reject(err.data) }) })

    }

    /**

    * 封装put请求

    * @param url

    * @param data

    * @returns {Promise}

    */

    export function put(url,data = {}) { return new Promise((resolve, reject) => { instance.put(url, data).then(res => { resolve(res.data); }).catch(err =>{ reject(err.data) }) })

    }

    文章来源: blog.csdn.net,作者:Marktubbu,版权归原作者所有,如需转载,请联系作者。

    原文链接:blog.csdn.net/Sensation_cyq/article/details/110477972

    展开全文
  • axios封装post get

    千次阅读 2018-05-17 13:41:04
    import axios from 'axios' import qs from 'qs' axios.defaults.baseURL = 'http://www.baidu.com/api' // 路径 axios.defaults.withCredentials = true //设置跨域 export default { post(url, data) { return...
  • axios封装post和get

    2020-11-18 10:59:13
    首先讲讲axiosget请求。 axios.get('/user') .then( (response) => { console.log(response); }) .catch( (error) => { console.log(error); }); get请求如何传参想必大家应该都知道的 一是可以
  • Axios封装post和get请求

    千次阅读 2019-09-16 19:20:26
    import axios from 'axios'; //返回一个Promise(发送post请求) export function fetchPost(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response...
  • 封装axios主要是通过axios创建service实例,实例中放置配置,常见的配置有baseURL(请求发送的原始地址)、timeout(请求超时时间)、headers(请求头)、params(发送get请求的参数)、data(发送post请求的参数)...
  • import axios from ‘axios’ import qs from ‘qs’ export class HttpService { Get(url, data) { return new Promise((resolve, reject) => { axios.get(url, { params: data })....
  • axios封装接口思路

    2020-10-07 14:42:12
    2.创建一个http.js文件 引入axios 封装get和post方法 以及开发及上线运用到的接口 还有一些请求超时 import axios from "axios" // 判断接口 如果是开发环境 接口就用http://120.53.31.103:84/开头 if (process.env....
  • axios封装请求get和post接口的方法

    千次阅读 2021-02-08 10:20:31
    import axios from 'axios'; import _ from 'lodash'; import Vue from 'vue'; import { Toast } from 'vant'; Vue.use(Toast); export default { get(url, params,config) { return new Promise((resolve, ...
  • axios.get() 封装

    2020-07-16 16:27:08
    axios.get() 封装 axios 对象,是一个基于 Promise 的 HTTP 库。 通过 jquery 可以将 axios.get() 实现过程封装如下: // 封装 axios let axios = { get(url){ return new Promise((resolve,reject) =>{ $....
  • axios封装

    2020-10-14 17:21:54
    axios初级封装 //get请求 export function get(url, params){ return new Promise((resolve, reject) =>{ axios.get(url, { params: params }).then(res => { resolve(res.data); })..
  • axios封装方式

    2020-09-20 12:33:01
    axios封装
  • axios 封装

    2018-11-27 17:57:24
    下面是对axios 封装,不喜勿喷,谢谢 import axios from "axios"; import qs from 'qs'; import store from "../../store" axios.defaults.headers.post['Content-Type'] = 'application/x-...
  • axios封装工具类

    2018-06-14 10:51:46
    vue axios封装get、post、postjson的提交方法。使用的时候引入调用方法。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,806
精华内容 6,722
关键字:

axios封装get