axios установить тип содержимого

JavaScript

С axios мне всегда кажется, что та или иная ошибка необъяснима, поэтому кратко резюмирую.

CDN-адресhttps://unpkg.com/axios@0.19.0/dist/axios.min.js, номер версии можно изменить, без номера версии будет последняя версия.
Однако в наши дни много разnpm i axiosВот и все.

Ключевые шаги для использования axios:

  1. Создайте экземпляр axios, чтобы вы могли разместить здесь общедоступную конфигурацию, напримерinstance.js, для обработки различных исключений
  2. Каждое апи пишется отдельно, если больше, то пишите папку, связанные апи можно писать в файле, если меньше, то непосредственно файлом типаapi.js
  3. Поместите апи в глобал, чтобы при использовании его не нужно было вводить, и можно было напрямую вызывать интерфейс на страницеthis.api.apiName()

Сначала нужно понять тип контента

получить запрос не существует настроекcontent-type. Используются только post и putcontent-type, широко используемый метод публикации, поэтому здесь мы сосредоточимся на публикации.
Существует три типа типа содержимого публикации:

  • Content-Type: application/json
    Для аксиом, когда сообщениеaxios.post(url,{a:1,b:2}), когда вторым параметром является объект, по умолчанию используется этот тип

  • Content-Type: application/x-www-form-urlencoded
    Для аксиом, когда сообщениеlet data = {a:1,b:2}; axios.post(url,qs.stringify({ data })), когда вторым параметром является строка, по умолчанию используется этот тип

  • Content-Type: multipart/form-data
    Для аксиом, когда сообщениеlet data = new FormData(); data.append('a',1'); data.append('b',2); axios.post(url,data), когда параметр имеет тип formData, по умолчанию используется этот тип, если вы отправляете его с действием, которое идет с формой, по умолчанию используется этот тип

Вышеуказанные три способа, сервер будет парсить по-разному, обратите на это особое внимание! ! ! ! !

Другими словами, content-type будет автоматически иметь соответствующее значение в соответствии с типом параметра, обычно нет необходимости устанавливать ~~~
Однако бывают случаи, когда я хочу передать объект, но на самом деле серверу нужноapplication/x-www-form-urlencodedВ настоящее время вам необходимо преобразовать параметры в строку, прежде чем вам потребуется унифицированный запрос на установку.transformRequest: [ function (data) { return Qs.stringify(data) } ],

Вот краткое изложение, несколько раз прочитайте вышеприведенное объяснение, у меня длинная дуга размышлений, и мне потребовалось много времени, чтобы понять, что там сказано.

Создайте экземпляр аксиомы

Ниже приведен пример кода.

/**
 * axios封装
 * 请求拦截、响应拦截、错误统一处理
 */
import axios from 'axios';

// 创建axios实例
var instance = axios.create({    timeout: 1000 * 12});
/** 
 * 请求拦截器 
 * 每次请求前，如果存在token则在请求头中携带token 
 */ 
instance.interceptors.request.use(    
    config => {        
        // 这里可以加统一的参数，appid，token这类的
    },    
    error => Promise.error(error)
)

// 响应拦截器
instance.interceptors.response.use(    
    // 请求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
    // 请求失败
    error => {
        const { response } = error;
        if (response) {
            // 请求已发出，但是不在2xx的范围，一般会和后台确定一些错误码，处理错误
            errorHandle(response.status, response.data.message);
            return Promise.reject(response);
        } else {
            // 请求都没发出去
            // 处理断网的情况
            if (!window.navigator.onLine) {
               // 断网做啥
            } 
            return Promise.reject(error);
        }
    }
);

export default instance;

Каждый апи пишется отдельно

// api.js
// 以对象的形式传参，这样参数不需要考虑顺序的问题
const ajaxKeMuData = ({ wind, projectSname = "" }) =>
  instance.post('/keMuXuBanRate', {
    wind,
    projectSname
  });
export {
    ajaxKeMuData
}

Поместите API глобально

Наконец, он добавляется в глобальную форму.Если это проект Vue здесь

// main.js
import api from './api' // 导入api接口
Vue.prototype.$api = api; // 将api挂载到vue的原型上

Когда страница называетсяthis.$api.ajaxKeMuData({...}).then(...)

наконец

Написание здесь очень грубое, и есть еще некоторые вещи, которые нужно улучшить.Хорошая статья от axios, особенно обновление

Хорошая статья от axios, особенно обновление
Объяснение типа контента

Категории